Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 7ecfa2f9 编写于 作者: M Mugen87
浏览文件
操作

Examples: More module examples.

上级 dbcfa727
展开全部 隐藏空白更改
内联 并排
Showing with 2016 addition and 1738 deletion
examples/webgl_decals.html
浏览文件 @ 7ecfa2f9
......@@ -14,281 +14,300 @@
click to shoot
</div>
<script src="../build/three.js"></script>
<script src="js/geometries/DecalGeometry.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
var container = document.getElementById( 'container' );
var renderer, scene, camera, stats;
var mesh;
var raycaster;
var line;
var intersection = {
intersects: false,
point: new THREE.Vector3(),
normal: new THREE.Vector3()
};
var mouse = new THREE.Vector2();
var textureLoader = new THREE.TextureLoader();
var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
var decalMaterial = new THREE.MeshPhongMaterial( {
specular: 0x444444,
map: decalDiffuse,
normalMap: decalNormal,
normalScale: new THREE.Vector2( 1, 1 ),
shininess: 30,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
wireframe: false
} );
var decals = [];
var mouseHelper;
var position = new THREE.Vector3();
var orientation = new THREE.Euler();
var size = new THREE.Vector3( 10, 10, 10 );
var params = {
minScale: 10,
maxScale: 20,
rotate: true,
clear: function () {
removeDecals();
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
BufferGeometry,
DirectionalLight,
Euler,
Line,
LineBasicMaterial,
Mesh,
MeshNormalMaterial,
MeshPhongMaterial,
PerspectiveCamera,
Raycaster,
Scene,
TextureLoader,
Vector2,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { DecalGeometry } from './jsm/geometries/DecalGeometry.js';
var container = document.getElementById( 'container' );
var renderer, scene, camera, stats;
var mesh;
var raycaster;
var line;
var intersection = {
intersects: false,
point: new Vector3(),
normal: new Vector3()
};
var mouse = new Vector2();
var textureLoader = new TextureLoader();
var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
var decalMaterial = new MeshPhongMaterial( {
specular: 0x444444,
map: decalDiffuse,
normalMap: decalNormal,
normalScale: new Vector2( 1, 1 ),
shininess: 30,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: - 4,
wireframe: false
} );
}
};
var decals = [];
var mouseHelper;
var position = new Vector3();
var orientation = new Euler();
var size = new Vector3( 10, 10, 10 );
window.addEventListener( 'load', init );
var params = {
minScale: 10,
maxScale: 20,
rotate: true,
clear: function () {
function init() {
removeDecals();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
};
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'load', init );
scene = new THREE.Scene();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 120;
camera.target = new THREE.Vector3();
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 200;
stats = new Stats();
container.appendChild( stats.dom );
scene.add( new THREE.AmbientLight( 0x443333 ) );
scene = new Scene();
var light = new THREE.DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 120;
camera.target = new Vector3();
var light = new THREE.DirectionalLight( 0xccccff, 1 );
light.position.set( - 1, 0.75, - 0.5 );
scene.add( light );
var controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 200;
var geometry = new THREE.BufferGeometry();
geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );
scene.add( new AmbientLight( 0x443333 ) );
line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
scene.add( line );
var light = new DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light );
loadLeePerrySmith();
var light = new DirectionalLight( 0xccccff, 1 );
light.position.set( - 1, 0.75, - 0.5 );
scene.add( light );
raycaster = new THREE.Raycaster();
var geometry = new BufferGeometry();
geometry.setFromPoints( [ new Vector3(), new Vector3() ] );
mouseHelper = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
mouseHelper.visible = false;
scene.add( mouseHelper );
line = new Line( geometry, new LineBasicMaterial() );
scene.add( line );
window.addEventListener( 'resize', onWindowResize, false );
loadLeePerrySmith();
var moved = false;
raycaster = new Raycaster();
controls.addEventListener( 'change', function () {
mouseHelper = new Mesh( new BoxBufferGeometry( 1, 1, 10 ), new MeshNormalMaterial() );
mouseHelper.visible = false;
scene.add( mouseHelper );
moved = true;
window.addEventListener( 'resize', onWindowResize, false );
} );
var moved = false;
window.addEventListener( 'mousedown', function () {
controls.addEventListener( 'change', function () {
moved = false;
moved = true;
}, false );
} );
window.addEventListener( 'mouseup', function () {
window.addEventListener( 'mousedown', function () {
checkIntersection();
if ( ! moved && intersection.intersects ) shoot();
moved = false;
} );
}, false );
window.addEventListener( 'mousemove', onTouchMove );
window.addEventListener( 'touchmove', onTouchMove );
window.addEventListener( 'mouseup', function () {
function onTouchMove( event ) {
checkIntersection();
if ( ! moved && intersection.intersects ) shoot();
var x, y;
} );
if ( event.changedTouches ) {
window.addEventListener( 'mousemove', onTouchMove );
window.addEventListener( 'touchmove', onTouchMove );
x = event.changedTouches[ 0 ].pageX;
y = event.changedTouches[ 0 ].pageY;
function onTouchMove( event ) {
} else {
var x, y;
x = event.clientX;
y = event.clientY;
if ( event.changedTouches ) {
}
x = event.changedTouches[ 0 ].pageX;
y = event.changedTouches[ 0 ].pageY;
mouse.x = ( x / window.innerWidth ) * 2 - 1;
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
} else {
checkIntersection();
x = event.clientX;
y = event.clientY;
}
}
function checkIntersection() {
mouse.x = ( x / window.innerWidth ) * 2 - 1;
mouse.y = - ( y / window.innerHeight ) * 2 + 1;
if ( ! mesh ) return;
checkIntersection();
raycaster.setFromCamera( mouse, camera );
}
var intersects = raycaster.intersectObjects( [ mesh ] );
function checkIntersection() {
if ( intersects.length > 0 ) {
if ( ! mesh ) return;
var p = intersects[ 0 ].point;
mouseHelper.position.copy( p );
intersection.point.copy( p );
raycaster.setFromCamera( mouse, camera );
var n = intersects[ 0 ].face.normal.clone();
n.transformDirection( mesh.matrixWorld );
n.multiplyScalar( 10 );
n.add( intersects[ 0 ].point );
var intersects = raycaster.intersectObjects( [ mesh ] );
intersection.normal.copy( intersects[ 0 ].face.normal );
mouseHelper.lookAt( n );
if ( intersects.length > 0 ) {
var positions = line.geometry.attributes.position;
positions.setXYZ( 0, p.x, p.y, p.z );
positions.setXYZ( 1, n.x, n.y, n.z );
positions.needsUpdate = true;
var p = intersects[ 0 ].point;
mouseHelper.position.copy( p );
intersection.point.copy( p );
intersection.intersects = true;
var n = intersects[ 0 ].face.normal.clone();
n.transformDirection( mesh.matrixWorld );
n.multiplyScalar( 10 );
n.add( intersects[ 0 ].point );
} else {
intersection.normal.copy( intersects[ 0 ].face.normal );
mouseHelper.lookAt( n );
intersection.intersects = false;
var positions = line.geometry.attributes.position;
positions.setXYZ( 0, p.x, p.y, p.z );
positions.setXYZ( 1, n.x, n.y, n.z );
positions.needsUpdate = true;
}
intersection.intersects = true;
}
} else {
var gui = new dat.GUI();
intersection.intersects = false;
gui.add( params, 'minScale', 1, 30 );
gui.add( params, 'maxScale', 1, 30 );
gui.add( params, 'rotate' );
gui.add( params, 'clear' );
gui.open();
}
onWindowResize();
animate();
}
}
var gui = new GUI();
function loadLeePerrySmith() {
gui.add( params, 'minScale', 1, 30 );
gui.add( params, 'maxScale', 1, 30 );
gui.add( params, 'rotate' );
gui.add( params, 'clear' );
gui.open();
var loader = new THREE.GLTFLoader();
onWindowResize();
animate();
loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
}
mesh = gltf.scene.children[ 0 ];
mesh.material = new THREE.MeshPhongMaterial( {
specular: 0x111111,
map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
shininess: 25
} );
function loadLeePerrySmith() {
scene.add( mesh );
mesh.scale.set( 10, 10, 10 );
var loader = new GLTFLoader();
} );
loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
}
mesh = gltf.scene.children[ 0 ];
mesh.material = new MeshPhongMaterial( {
specular: 0x111111,
map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
shininess: 25
} );
function shoot() {
scene.add( mesh );
mesh.scale.set( 10, 10, 10 );
position.copy( intersection.point );
orientation.copy( mouseHelper.rotation );
} );
if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
}
var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
size.set( scale, scale, scale );
function shoot() {
var material = decalMaterial.clone();
material.color.setHex( Math.random() * 0xffffff );
position.copy( intersection.point );
orientation.copy( mouseHelper.rotation );
var m = new THREE.Mesh( new THREE.DecalGeometry( mesh, position, orientation, size ), material );
if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
decals.push( m );
scene.add( m );
var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
size.set( scale, scale, scale );
}
var material = decalMaterial.clone();
material.color.setHex( Math.random() * 0xffffff );
function removeDecals() {
var m = new Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
decals.forEach( function ( d ) {
decals.push( m );
scene.add( m );
scene.remove( d );
}
} );
function removeDecals() {
decals = [];
decals.forEach( function ( d ) {
}
scene.remove( d );
function onWindowResize() {
} );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
decals = [];
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
renderer.setSize( window.innerWidth, window.innerHeight );
function animate() {
}
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
renderer.render( scene, camera );
renderer.render( scene, camera );
stats.update();
stats.update();
}
}
</script>
......
examples/webgl_depth_texture.html
浏览文件 @ 7ecfa2f9
......@@ -63,11 +63,27 @@
</div>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
DepthTexture,
Mesh,
MeshBasicMaterial,
NearestFilter,
OrthographicCamera,
PerspectiveCamera,
PlaneBufferGeometry,
RGBFormat,
Scene,
ShaderMaterial,
TorusKnotBufferGeometry,
UnsignedShortType,
WebGLRenderer,
WebGLRenderTarget
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var camera, scene, renderer, stats;
var target;
......@@ -79,7 +95,7 @@
function init() {
renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
renderer = new WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
if ( ! renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
......@@ -97,27 +113,27 @@
stats = new Stats();
document.body.appendChild( stats.dom );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
camera.position.z = 4;
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.rotateSpeed = 0.35;
// Create a multi render target with Float buffers
target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
target.texture.format = THREE.RGBFormat;
target.texture.minFilter = THREE.NearestFilter;
target.texture.magFilter = THREE.NearestFilter;
target = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
target.texture.format = RGBFormat;
target.texture.minFilter = NearestFilter;
target.texture.magFilter = NearestFilter;
target.texture.generateMipmaps = false;
target.stencilBuffer = false;
target.depthBuffer = true;
target.depthTexture = new THREE.DepthTexture();
target.depthTexture.type = THREE.UnsignedShortType;
target.depthTexture = new DepthTexture();
target.depthTexture.type = UnsignedShortType;
// Our scene
scene = new THREE.Scene();
scene = new Scene();
setupScene();
// Setup post-processing step
......@@ -131,8 +147,8 @@
function setupPost() {
// Setup post processing stage
postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
var postMaterial = new THREE.ShaderMaterial( {
postCamera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
var postMaterial = new ShaderMaterial( {
vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
uniforms: {
......@@ -142,21 +158,21 @@
tDepth: { value: target.depthTexture }
}
} );
var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
var postQuad = new THREE.Mesh( postPlane, postMaterial );
postScene = new THREE.Scene();
var postPlane = new PlaneBufferGeometry( 2, 2 );
var postQuad = new Mesh( postPlane, postMaterial );
postScene = new Scene();
postScene.add( postQuad );
}
function setupScene() {
//var diffuse = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
//diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;
//var diffuse = new TextureLoader().load( 'textures/brick_diffuse.jpg' );
//diffuse.wrapS = diffuse.wrapT = RepeatWrapping;
// Setup some geometries
var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
var material = new THREE.MeshBasicMaterial( { color: 'blue' } );
var geometry = new TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
var material = new MeshBasicMaterial( { color: 'blue' } );
var count = 50;
var scale = 5;
......@@ -167,7 +183,7 @@
var z = ( Math.random() * 2.0 ) - 1.0;
var zScale = Math.sqrt( 1.0 - z * z ) * scale;
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.set(
Math.cos( r ) * zScale,
Math.sin( r ) * zScale,
......
examples/webgl_effects_anaglyph.html
浏览文件 @ 7ecfa2f9
......@@ -12,17 +12,18 @@
skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
</div>
<script src="../build/three.js"></script>
<script src="js/effects/AnaglyphEffect.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
CubeTextureLoader,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { AnaglyphEffect } from './jsm/effects/AnaglyphEffect.js';
var container, camera, scene, renderer, effect;
......@@ -44,7 +45,7 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 3;
camera.focalLength = 3;
......@@ -56,17 +57,17 @@
path + 'pz' + format, path + 'nz' + format
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
var textureCube = new CubeTextureLoader().load( urls );
scene = new THREE.Scene();
scene = new Scene();
scene.background = textureCube;
var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 10 - 5;
mesh.position.y = Math.random() * 10 - 5;
......@@ -82,14 +83,14 @@
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effect = new THREE.AnaglyphEffect( renderer );
effect = new AnaglyphEffect( renderer );
effect.setSize( width, height );
//
......
examples/webgl_effects_ascii.html
浏览文件 @ 7ecfa2f9
......@@ -9,20 +9,22 @@
<body>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - ascii</div>
<script src="../build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/effects/AsciiEffect.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
Mesh,
MeshBasicMaterial,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
PointLight,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { AsciiEffect } from './jsm/effects/AsciiEffect.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
var camera, controls, scene, renderer, effect;
......@@ -35,34 +37,34 @@
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
scene = new Scene();
var light = new THREE.PointLight( 0xffffff );
var light = new PointLight( 0xffffff );
light.position.set( 500, 500, 500 );
scene.add( light );
var light = new THREE.PointLight( 0xffffff, 0.25 );
var light = new PointLight( 0xffffff, 0.25 );
light.position.set( - 500, - 500, - 500 );
scene.add( light );
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true } ) );
sphere = new Mesh( new SphereBufferGeometry( 200, 20, 10 ), new MeshPhongMaterial( { flatShading: true } ) );
scene.add( sphere );
// Plane
plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane = new Mesh( new PlaneBufferGeometry( 400, 400 ), new MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane.position.y = - 200;
plane.rotation.x = - Math.PI / 2;
scene.add( plane );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
effect = new THREE.AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
effect = new AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
effect.setSize( window.innerWidth, window.innerHeight );
effect.domElement.style.color = 'white';
effect.domElement.style.backgroundColor = 'black';
......@@ -72,7 +74,7 @@
document.body.appendChild( effect.domElement );
controls = new THREE.TrackballControls( camera, effect.domElement );
controls = new TrackballControls( camera, effect.domElement );
//
......
examples/webgl_effects_parallaxbarrier.html
浏览文件 @ 7ecfa2f9
......@@ -13,17 +13,18 @@
skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
</div>
<script src="../build/three.js"></script>
<script src="js/effects/ParallaxBarrierEffect.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
CubeTextureLoader,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';
var container, camera, scene, renderer, effect;
......@@ -45,7 +46,7 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 3;
camera.focalLength = 3;
......@@ -57,17 +58,17 @@
path + 'pz' + format, path + 'nz' + format
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
var textureCube = new CubeTextureLoader().load( urls );
scene = new THREE.Scene();
scene = new Scene();
scene.background = textureCube;
var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 10 - 5;
mesh.position.y = Math.random() * 10 - 5;
......@@ -83,14 +84,14 @@
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effect = new THREE.ParallaxBarrierEffect( renderer );
effect = new ParallaxBarrierEffect( renderer );
effect.setSize( width, height );
//
......
examples/webgl_effects_peppersghost.html
浏览文件 @ 7ecfa2f9
......@@ -8,117 +8,121 @@
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
</div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
</div>
<script src="../build/three.js"></script>
<script src="js/effects/PeppersGhostEffect.js"></script>
<script src="js/WebGL.js"></script>
<script type="module">
import {
BoxBufferGeometry,
Color,
Float32BufferAttribute,
Group,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
<script>
import { PeppersGhostEffect } from './jsm/effects/PeppersGhostEffect.js';
if ( WEBGL.isWebGLAvailable() === false ) {
var container;
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
var camera, scene, renderer, effect;
var group;
}
var container;
var camera, scene, renderer, effect;
var group;
init();
animate();
init();
animate();
function init() {
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
scene = new Scene();
scene = new THREE.Scene();
group = new Group();
scene.add( group );
group = new THREE.Group();
scene.add( group );
// Cube
// Cube
var geometry = new BoxBufferGeometry( 1, 1, 1 );
geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
var position = geometry.attributes.position;
var colors = [];
var color = new Color();
var position = geometry.attributes.position;
var colors = [];
var color = new THREE.Color();
// generate for each side of the cube a different color
// generate for each side of the cube a different color
for ( var i = 0; i < position.count; i += 6 ) {
for ( var i = 0; i < position.count; i += 6 ) {
color.setHex( Math.random() * 0xffffff );
color.setHex( Math.random() * 0xffffff );
// first face
// first face
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
// second face
// second face
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
}
}
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
var material = new MeshBasicMaterial( { vertexColors: VertexColors } );
for ( var i = 0; i < 10; i ++ ) {
for ( var i = 0; i < 10; i ++ ) {
var cube = new THREE.Mesh( geometry, material );
cube.position.x = Math.random() * 2 - 1;
cube.position.y = Math.random() * 2 - 1;
cube.position.z = Math.random() * 2 - 1;
cube.scale.multiplyScalar( Math.random() + 0.5 );
group.add( cube );
var cube = new Mesh( geometry, material );
cube.position.x = Math.random() * 2 - 1;
cube.position.y = Math.random() * 2 - 1;
cube.position.z = Math.random() * 2 - 1;
cube.scale.multiplyScalar( Math.random() + 0.5 );
group.add( cube );
}
}
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
effect = new THREE.PeppersGhostEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
effect.cameraDistance = 5;
effect = new PeppersGhostEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
effect.cameraDistance = 5;
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'resize', onWindowResize, false );
}
}
function onWindowResize() {
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
effect.setSize( window.innerWidth, window.innerHeight );
}
}
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
group.rotation.y += 0.01;
group.rotation.y += 0.01;
effect.render( scene, camera );
effect.render( scene, camera );
}
}
</script>
......
examples/webgl_effects_stereo.html
浏览文件 @ 7ecfa2f9
......@@ -12,19 +12,19 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - stereo. skybox by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>
</div>
<script src="../build/three.js"></script>
<script src="js/effects/StereoEffect.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
CubeRefractionMapping,
CubeTextureLoader,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { StereoEffect } from './jsm/effects/StereoEffect.js';
var container, camera, scene, renderer, effect;
......@@ -45,26 +45,26 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.z = 3200;
scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
scene = new Scene();
scene.background = new CubeTextureLoader()
.setPath( 'textures/cube/Park3Med/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
var geometry = new SphereBufferGeometry( 100, 32, 16 );
var textureCube = new THREE.CubeTextureLoader()
var textureCube = new CubeTextureLoader()
.setPath( 'textures/cube/Park3Med/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
textureCube.mapping = THREE.CubeRefractionMapping;
textureCube.mapping = CubeRefractionMapping;
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 10000 - 5000;
mesh.position.y = Math.random() * 10000 - 5000;
mesh.position.z = Math.random() * 10000 - 5000;
......@@ -77,11 +77,11 @@
//
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
effect = new THREE.StereoEffect( renderer );
effect = new StereoEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
//
......
examples/webgl_fire.html
浏览文件 @ 7ecfa2f9
......@@ -5,13 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/objects/Fire.js"></script>
</head>
<body>
......@@ -19,13 +12,22 @@
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> fire and smoke demo
</div>
<script>
<script type="module">
import {
AmbientLight,
Color,
PerspectiveCamera,
PlaneBufferGeometry,
PointLight,
Scene,
Texture,
WebGLRenderer
} from "../build/three.module.js";
if ( WEBGL.isWebGLAvailable() === false ) {
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
import { Fire } from './jsm/objects/Fire.js';
var camera, scene, renderer, stats;
var fire;
......@@ -56,21 +58,21 @@
var width = window.innerWidth;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
camera.position.z = 25;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
scene = new Scene();
scene.background = new Color( 0x000000 );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
var pointLight = new PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
var plane = new THREE.PlaneBufferGeometry( 20, 20 );
fire = new THREE.Fire( plane, {
var plane = new PlaneBufferGeometry( 20, 20 );
fire = new Fire( plane, {
textureWidth: 512,
textureHeight: 512,
debug: false
......@@ -78,7 +80,7 @@
fire.position.z = - 2;
scene.add( fire );
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer = new WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
......@@ -209,7 +211,7 @@
context.fillStyle = "black";
context.strokeText( text, canvas.width / 2, canvas.height * 0.75 );
var texture = new THREE.Texture( canvas );
var texture = new Texture( canvas );
texture.needsUpdate = true;
fire.setSourceMap( texture );
......@@ -217,7 +219,7 @@
};
// dat.gui
var gui = new dat.GUI();
var gui = new GUI();
gui.add( params, "Single" );
gui.add( params, "Multiple" );
......
examples/webgl_framebuffer_texture.html
浏览文件 @ 7ecfa2f9
......@@ -24,11 +24,6 @@
border: 1px solid white;
}
</style>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
</head>
<body>
......@@ -40,13 +35,27 @@
<div></div>
</div>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
Color,
DataTexture,
Mesh,
MeshStandardMaterial,
NearestFilter,
OrthographicCamera,
PerspectiveCamera,
PointLight,
RGBFormat,
Scene,
Sprite,
SpriteMaterial,
TorusKnotBufferGeometry,
Vector2,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var camera, scene, renderer;
var mesh, sprite, texture;
......@@ -56,7 +65,7 @@
var dpr = window.devicePixelRatio;
var textureSize = 128 * dpr;
var vector = new THREE.Vector2();
var vector = new Vector2();
init();
animate();
......@@ -68,29 +77,29 @@
var width = window.innerWidth;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
camera.position.z = 20;
cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho = new OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho.position.z = 10;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x20252f );
sceneOrtho = new THREE.Scene();
scene = new Scene();
scene.background = new Color( 0x20252f );
sceneOrtho = new Scene();
//
var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
var geometry = new TorusKnotBufferGeometry( 3, 1, 256, 32 );
var material = new MeshStandardMaterial( { color: 0x6083c2 } );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
//
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
var pointLight = new PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
......@@ -98,15 +107,15 @@
var data = new Uint8Array( textureSize * textureSize * 3 );
texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
texture = new DataTexture( data, textureSize, textureSize, RGBFormat );
texture.minFilter = NearestFilter;
texture.magFilter = NearestFilter;
texture.needsUpdate = true;
//
var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
sprite = new THREE.Sprite( spriteMaterial );
var spriteMaterial = new SpriteMaterial( { map: texture } );
sprite = new Sprite( spriteMaterial );
sprite.scale.set( textureSize, textureSize, 1 );
sceneOrtho.add( sprite );
......@@ -114,7 +123,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
......@@ -123,7 +132,7 @@
//
var overlay = document.getElementById( 'overlay' );
var controls = new THREE.OrbitControls( camera, overlay );
var controls = new OrbitControls( camera, overlay );
controls.enablePan = false;
//
......
examples/webgl_furnace_test.html
浏览文件 @ 7ecfa2f9
......@@ -11,12 +11,6 @@
}
</style>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
</head>
<body>
......@@ -28,130 +22,136 @@
</div>
</div>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
<script type="module">
import {
Color,
CubeCamera,
DoubleSide,
Mesh,
MeshBasicMaterial,
MeshPhysicalMaterial,
OrthographicCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
}
import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
var scene, camera, renderer, envMap, radianceMap, gui;
var right = 6;
var config = {
preserveEnergy: true,
};
var scene, camera, renderer, envMap, radianceMap;
var right = 6;
function init() {
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
// renderer
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onResize, false );
window.addEventListener( 'resize', onResize, false );
// scene
// scene
scene = new THREE.Scene();
scene = new Scene();
// camera
// camera
camera = new THREE.OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
camera.position.set( 0, 0, 9 );
camera = new OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
camera.position.set( 0, 0, 9 );
}
}
function createObjects() {
function createObjects() {
var geo = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
var count = 10;
for ( var x = 0; x <= count; x ++ ) {
var geo = new SphereBufferGeometry( 0.4, 32, 32 );
var count = 10;
for ( var x = 0; x <= count; x ++ ) {
var mesh = new THREE.Mesh( geo, new THREE.MeshPhysicalMaterial( {
roughness: x / count,
metalness: 1,
color: 0xffffff,
envMap: radianceMap,
envMapIntensity: 1,
reflectivity: 1,
} ) );
mesh.position.x = x - ( Math.floor( count / 2 ) );
scene.add( mesh );
var mesh = new Mesh( geo, new MeshPhysicalMaterial( {
roughness: x / count,
metalness: 1,
color: 0xffffff,
envMap: radianceMap,
envMapIntensity: 1,
reflectivity: 1,
} ) );
mesh.position.x = x - ( Math.floor( count / 2 ) );
scene.add( mesh );
}
}
}
}
function createEnvironment() {
function createEnvironment() {
var color = new THREE.Color( 0xcccccc );
var sky = new THREE.Mesh( new THREE.SphereBufferGeometry( 1, 32, 32 ), new THREE.MeshBasicMaterial( {
color: color,
side: THREE.DoubleSide,
} ) );
sky.scale.setScalar( 100 );
var color = new Color( 0xcccccc );
var sky = new Mesh( new SphereBufferGeometry( 1, 32, 32 ), new MeshBasicMaterial( {
color: color,
side: DoubleSide,
} ) );
sky.scale.setScalar( 100 );
var envScene = new THREE.Scene();
envScene.add( sky );
envScene.background = color;
var cubeCamera = new THREE.CubeCamera( 1, 100, 256, 256 );
cubeCamera.update( renderer, envScene );
var envScene = new Scene();
envScene.add( sky );
envScene.background = color;
var cubeCamera = new CubeCamera( 1, 100, 256, 256 );
cubeCamera.update( renderer, envScene );
envMap = cubeCamera.renderTarget.texture;
envMap = cubeCamera.renderTarget.texture;
scene.background = color;
scene.background = color;
}
}
function getRadiance() {
function getRadiance() {
return new Promise( function ( resolve, reject ) {
return new Promise( function ( resolve ) {
var pmremGenerator = new THREE.PMREMGenerator( envMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
var cubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
var pmremGenerator = new PMREMGenerator( envMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
var cubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
radianceMap = cubeRenderTarget.texture;
resolve();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
radianceMap = cubeRenderTarget.texture;
resolve();
} );
} );
}
}
function onResize() {
function onResize() {
var aspect = window.innerWidth / window.innerHeight;
camera.top = right / aspect;
camera.bottom = - camera.top;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
var aspect = window.innerWidth / window.innerHeight;
camera.top = right / aspect;
camera.bottom = - camera.top;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
}
function render() {
function render() {
renderer.render( scene, camera );
renderer.render( scene, camera );
}
}
Promise.resolve()
.then( init )
.then( createEnvironment )
.then( getRadiance )
.then( createObjects )
.then( render );
Promise.resolve()
.then( init )
.then( createEnvironment )
.then( getRadiance )
.then( createObjects )
.then( render );
</script>
</body>
......
examples/webgl_geometries.html
浏览文件 @ 7ecfa2f9
......@@ -10,18 +10,34 @@
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
CircleBufferGeometry,
CylinderBufferGeometry,
DoubleSide,
IcosahedronBufferGeometry,
LatheBufferGeometry,
Mesh,
MeshPhongMaterial,
OctahedronBufferGeometry,
PerspectiveCamera,
PlaneBufferGeometry,
PointLight,
RepeatWrapping,
RingBufferGeometry,
Scene,
SphereBufferGeometry,
TetrahedronBufferGeometry,
TextureLoader,
TorusBufferGeometry,
TorusKnotBufferGeometry,
Vector2,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var camera, scene, renderer, stats;
......@@ -30,65 +46,65 @@
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
scene = new Scene();
var object;
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
var pointLight = new PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
//
object = new THREE.Mesh( new THREE.SphereBufferGeometry( 75, 20, 10 ), material );
object = new Mesh( new SphereBufferGeometry( 75, 20, 10 ), material );
object.position.set( - 300, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 1 ), material );
object = new Mesh( new IcosahedronBufferGeometry( 75, 1 ), material );
object.position.set( - 100, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 2 ), material );
object = new Mesh( new OctahedronBufferGeometry( 75, 2 ), material );
object.position.set( 100, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
object.position.set( 300, 0, 200 );
scene.add( object );
//
object = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ), material );
object = new Mesh( new PlaneBufferGeometry( 100, 100, 4, 4 ), material );
object.position.set( - 300, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
object = new Mesh( new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
object.position.set( - 100, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
object = new Mesh( new CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
object.position.set( 100, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object = new Mesh( new RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object.position.set( 300, 0, 0 );
scene.add( object );
//
object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
object = new Mesh( new CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
object.position.set( - 300, 0, - 200 );
scene.add( object );
......@@ -96,25 +112,25 @@
for ( var i = 0; i < 50; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
points.push( new Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
}
object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
object = new Mesh( new LatheBufferGeometry( points, 20 ), material );
object.position.set( - 100, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TorusBufferGeometry( 50, 20, 20, 20 ), material );
object = new Mesh( new TorusBufferGeometry( 50, 20, 20, 20 ), material );
object.position.set( 100, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
object = new Mesh( new TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
object.position.set( 300, 0, - 200 );
scene.add( object );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometries_parametric.html
浏览文件 @ 7ecfa2f9
......@@ -11,21 +11,26 @@
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - parametric geometries</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/curves/CurveExtras.js"></script>
<script src="js/geometries/ParametricGeometries.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BufferGeometry,
DoubleSide,
Mesh,
MeshPhongMaterial,
ParametricBufferGeometry,
PerspectiveCamera,
PointLight,
RepeatWrapping,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { Curves } from './jsm/curves/CurveExtras.js';
import { ParametricGeometries } from './jsm/geometries/ParametricGeometries.js';
var camera, scene, renderer, stats;
......@@ -36,78 +41,78 @@
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
scene = new Scene();
//
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
var pointLight = new PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
//
var geometry, object;
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 );
geometry = new ParametricBufferGeometry( ParametricGeometries.plane( 100, 100 ), 10, 10 );
geometry.center();
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.set( - 200, 0, 200 );
scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 );
object = new THREE.Mesh( geometry, material );
geometry = new ParametricBufferGeometry( ParametricGeometries.klein, 20, 20 );
object = new Mesh( geometry, material );
object.position.set( 0, 0, 200 );
object.scale.multiplyScalar( 5 );
scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 );
object = new THREE.Mesh( geometry, material );
geometry = new ParametricBufferGeometry( ParametricGeometries.mobius, 20, 20 );
object = new Mesh( geometry, material );
object.position.set( 200, 0, 200 );
object.scale.multiplyScalar( 30 );
scene.add( object );
//
var GrannyKnot = new THREE.Curves.GrannyKnot();
var GrannyKnot = new Curves.GrannyKnot();
var torus = new THREE.ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 );
var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
var torus = new ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
var sphere = new ParametricGeometries.SphereGeometry( 50, 20, 10 );
var tube = new ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
torus = new THREE.BufferGeometry().fromGeometry( torus );
sphere = new THREE.BufferGeometry().fromGeometry( sphere );
tube = new THREE.BufferGeometry().fromGeometry( tube );
torus = new BufferGeometry().fromGeometry( torus );
sphere = new BufferGeometry().fromGeometry( sphere );
tube = new BufferGeometry().fromGeometry( tube );
object = new THREE.Mesh( torus, material );
object = new Mesh( torus, material );
object.position.set( - 200, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( sphere, material );
object = new Mesh( sphere, material );
object.position.set( 0, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( tube, material );
object = new Mesh( tube, material );
object.position.set( 200, 0, - 200 );
object.scale.multiplyScalar( 2 );
scene.add( object );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/webgl_geometry_colors.html
浏览文件 @ 7ecfa2f9
......@@ -20,18 +20,24 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - vertex colors</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
BufferAttribute,
CanvasTexture,
Color,
DirectionalLight,
IcosahedronBufferGeometry,
Mesh,
MeshBasicMaterial,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var container, stats;
......@@ -49,13 +55,13 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1800;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
var light = new THREE.DirectionalLight( 0xffffff );
var light = new DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
scene.add( light );
......@@ -73,25 +79,25 @@
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var shadowTexture = new THREE.CanvasTexture( canvas );
var shadowTexture = new CanvasTexture( canvas );
var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
var shadowMesh;
shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
shadowMesh = new Mesh( shadowGeo, shadowMaterial );
shadowMesh.position.y = - 250;
shadowMesh.rotation.x = - Math.PI / 2;
scene.add( shadowMesh );
shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
shadowMesh = new Mesh( shadowGeo, shadowMaterial );
shadowMesh.position.y = - 250;
shadowMesh.position.x = - 400;
shadowMesh.rotation.x = - Math.PI / 2;
scene.add( shadowMesh );
shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
shadowMesh = new Mesh( shadowGeo, shadowMaterial );
shadowMesh.position.y = - 250;
shadowMesh.position.x = 400;
shadowMesh.rotation.x = - Math.PI / 2;
......@@ -99,15 +105,15 @@
var radius = 200;
var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
var count = geometry1.attributes.position.count;
geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
var geometry2 = geometry1.clone();
var geometry3 = geometry1.clone();
var color = new THREE.Color();
var color = new Color();
var positions1 = geometry1.attributes.position;
var positions2 = geometry2.attributes.position;
var positions3 = geometry3.attributes.position;
......@@ -128,34 +134,34 @@
}
var material = new THREE.MeshPhongMaterial( {
var material = new MeshPhongMaterial( {
color: 0xffffff,
flatShading: true,
vertexColors: THREE.VertexColors,
vertexColors: VertexColors,
shininess: 0
} );
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
var mesh = new THREE.Mesh( geometry1, material );
var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
var mesh = new Mesh( geometry1, material );
var wireframe = new Mesh( geometry1, wireframeMaterial );
mesh.add( wireframe );
mesh.position.x = - 400;
mesh.rotation.x = - 1.87;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry2, material );
var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
var mesh = new Mesh( geometry2, material );
var wireframe = new Mesh( geometry2, wireframeMaterial );
mesh.add( wireframe );
mesh.position.x = 400;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry3, material );
var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
var mesh = new Mesh( geometry3, material );
var wireframe = new Mesh( geometry3, wireframeMaterial );
mesh.add( wireframe );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/webgl_geometry_colors_lookuptable.html
浏览文件 @ 7ecfa2f9
......@@ -24,18 +24,29 @@
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/math/Lut.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
BufferGeometryLoader,
CanvasTexture,
Color,
DoubleSide,
Float32BufferAttribute,
Mesh,
MeshLambertMaterial,
OrthographicCamera,
PerspectiveCamera,
PointLight,
Scene,
Sprite,
SpriteMaterial,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { Lut } from './jsm/math/Lut.js';
var container;
......@@ -52,33 +63,33 @@
container = document.getElementById( 'container' );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
uiScene = new THREE.Scene();
uiScene = new Scene();
lut = new THREE.Lut();
lut = new Lut();
var width = window.innerWidth;
var height = window.innerHeight;
perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
perpCamera = new PerspectiveCamera( 60, width / height, 1, 100 );
perpCamera.position.set( 0, 0, 10 );
scene.add( perpCamera );
orthoCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
orthoCamera = new OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
orthoCamera.position.set( 0.5, 0, 1 );
sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
map: new THREE.CanvasTexture( lut.createCanvas() )
sprite = new Sprite( new SpriteMaterial( {
map: new CanvasTexture( lut.createCanvas() )
} ) );
sprite.scale.x = 0.125;
uiScene.add( sprite );
mesh = new THREE.Mesh( undefined, new THREE.MeshLambertMaterial( {
side: THREE.DoubleSide,
mesh = new Mesh( undefined, new MeshLambertMaterial( {
side: DoubleSide,
color: 0xF5F5F5,
vertexColors: THREE.VertexColors
vertexColors: VertexColors
} ) );
scene.add( mesh );
......@@ -87,10 +98,10 @@
};
loadModel( );
var pointLight = new THREE.PointLight( 0xffffff, 1 );
var pointLight = new PointLight( 0xffffff, 1 );
perpCamera.add( pointLight );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
......@@ -98,10 +109,10 @@
window.addEventListener( 'resize', onWindowResize, false );
var controls = new THREE.OrbitControls( perpCamera, renderer.domElement );
var controls = new OrbitControls( perpCamera, renderer.domElement );
controls.addEventListener( 'change', render );
var gui = new dat.GUI();
var gui = new GUI();
gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange( function () {
......@@ -135,7 +146,7 @@
function loadModel( ) {
var loader = new THREE.BufferGeometryLoader();
var loader = new BufferGeometryLoader();
loader.load( 'models/json/pressure.json', function ( geometry ) {
geometry.center();
......@@ -148,7 +159,7 @@
colors.push( 1, 1, 1 );
}
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
mesh.geometry = geometry;
updateColors();
......
examples/webgl_geometry_convex.html
浏览文件 @ 7ecfa2f9
......@@ -10,20 +10,28 @@
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - convex geometry</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/math/ConvexHull.js"></script>
<script src="js/geometries/ConvexGeometry.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
AxesHelper,
BackSide,
BufferGeometry,
DodecahedronGeometry,
FrontSide,
Group,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
PointLight,
Points,
PointsMaterial,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { ConvexBufferGeometry } from './jsm/geometries/ConvexGeometry.js';
var group, camera, scene, renderer;
......@@ -32,48 +40,48 @@
function init() {
scene = new THREE.Scene();
scene = new Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 15, 20, 30 );
scene.add( camera );
// controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 20;
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2;
scene.add( new THREE.AmbientLight( 0x222222 ) );
scene.add( new AmbientLight( 0x222222 ) );
// light
var light = new THREE.PointLight( 0xffffff, 1 );
var light = new PointLight( 0xffffff, 1 );
camera.add( light );
// helper
scene.add( new THREE.AxesHelper( 20 ) );
scene.add( new AxesHelper( 20 ) );
// textures
var loader = new THREE.TextureLoader();
var loader = new TextureLoader();
var texture = loader.load( 'textures/sprites/disc.png' );
group = new THREE.Group();
group = new Group();
scene.add( group );
// points
var vertices = new THREE.DodecahedronGeometry( 10 ).vertices;
var vertices = new DodecahedronGeometry( 10 ).vertices;
for ( var i = 0; i < vertices.length; i ++ ) {
......@@ -81,7 +89,7 @@
}
var pointsMaterial = new THREE.PointsMaterial( {
var pointsMaterial = new PointsMaterial( {
color: 0x0080ff,
map: texture,
......@@ -90,28 +98,28 @@
} );
var pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
var pointsGeometry = new BufferGeometry().setFromPoints( vertices );
var points = new THREE.Points( pointsGeometry, pointsMaterial );
var points = new Points( pointsGeometry, pointsMaterial );
group.add( points );
// convex hull
var meshMaterial = new THREE.MeshLambertMaterial( {
var meshMaterial = new MeshLambertMaterial( {
color: 0xffffff,
opacity: 0.5,
transparent: true
} );
var meshGeometry = new THREE.ConvexBufferGeometry( vertices );
var meshGeometry = new ConvexBufferGeometry( vertices );
var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
mesh.material.side = THREE.BackSide; // back faces
var mesh = new Mesh( meshGeometry, meshMaterial );
mesh.material.side = BackSide; // back faces
mesh.renderOrder = 0;
group.add( mesh );
var mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
mesh.material.side = THREE.FrontSide; // front faces
var mesh = new Mesh( meshGeometry, meshMaterial.clone() );
mesh.material.side = FrontSide; // front faces
mesh.renderOrder = 1;
group.add( mesh );
......@@ -121,12 +129,6 @@
}
// function randomPoint() {
// return new THREE.Vector3( THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ) );
// }
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
......
examples/webgl_geometry_cube.html
浏览文件 @ 7ecfa2f9
......@@ -8,9 +8,16 @@
</head>
<body>
<script src="../build/three.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
var camera, scene, renderer;
var mesh;
......@@ -20,20 +27,20 @@
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
scene = new Scene();
var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var texture = new TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var geometry = new BoxBufferGeometry( 200, 200, 200 );
var material = new MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometry_dynamic.html
浏览文件 @ 7ecfa2f9
......@@ -21,20 +21,24 @@
left click: forward, right click: backward
</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
Clock,
Color,
FogExp2,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
RepeatWrapping,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
var camera, controls, scene, renderer, stats;
......@@ -47,21 +51,21 @@
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = 200;
clock = new THREE.Clock();
clock = new Clock();
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.movementSpeed = 500;
controls.lookSpeed = 0.1;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xaaccff );
scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
scene = new Scene();
scene.background = new Color( 0xaaccff );
scene.fog = new FogExp2( 0xaaccff, 0.0007 );
geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
geometry = new PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
geometry.rotateX( - Math.PI / 2 );
var position = geometry.attributes.position;
......@@ -74,16 +78,16 @@
}
var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
var texture = new TextureLoader().load( 'textures/water.jpg' );
texture.wrapS = texture.wrapT = RepeatWrapping;
texture.repeat.set( 5, 5 );
material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
material = new MeshBasicMaterial( { color: 0x0044ff, map: texture } );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometry_extrude_shapes.html
浏览文件 @ 7ecfa2f9
......@@ -17,10 +17,25 @@
<body>
<script src="../build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
<script type="module">
import {
AmbientLight,
CatmullRomCurve3,
Color,
ExtrudeBufferGeometry,
Mesh,
MeshLambertMaterial,
Math as _Math,
PerspectiveCamera,
PointLight,
Scene,
Shape,
Vector2,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import { TrackballControls } from './jsm/controls/TrackballControls.js';
var camera, scene, renderer, controls;
......@@ -39,35 +54,35 @@
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometry extrude shapes';
document.body.appendChild( info );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x222222 );
scene = new Scene();
scene.background = new Color( 0x222222 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 500 );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
controls.minDistance = 200;
controls.maxDistance = 500;
scene.add( new THREE.AmbientLight( 0x222222 ) );
scene.add( new AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff );
var light = new PointLight( 0xffffff );
light.position.copy( camera.position );
scene.add( light );
//
var closedSpline = new THREE.CatmullRomCurve3( [
new THREE.Vector3( - 60, - 100, 60 ),
new THREE.Vector3( - 60, 20, 60 ),
new THREE.Vector3( - 60, 120, 60 ),
new THREE.Vector3( 60, 20, - 60 ),
new THREE.Vector3( 60, - 100, - 60 )
var closedSpline = new CatmullRomCurve3( [
new Vector3( - 60, - 100, 60 ),
new Vector3( - 60, 20, 60 ),
new Vector3( - 60, 120, 60 ),
new Vector3( 60, 20, - 60 ),
new Vector3( 60, - 100, - 60 )
] );
closedSpline.curveType = 'catmullrom';
......@@ -88,17 +103,17 @@
var a = 2 * i / count * Math.PI;
pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
}
var shape = new THREE.Shape( pts );
var shape = new Shape( pts );
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
var material = new MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
......@@ -110,11 +125,11 @@
for ( var i = 0; i < 10; i ++ ) {
randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.Math.randFloat( - 50, 50 ), THREE.Math.randFloat( - 50, 50 ) ) );
randomPoints.push( new Vector3( ( i - 4.5 ) * 50, _Math.randFloat( - 50, 50 ), _Math.randFloat( - 50, 50 ) ) );
}
var randomSpline = new THREE.CatmullRomCurve3( randomPoints );
var randomSpline = new CatmullRomCurve3( randomPoints );
//
......@@ -133,17 +148,17 @@
var a = i / numPts * Math.PI;
pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
}
var shape = new THREE.Shape( pts );
var shape = new Shape( pts );
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
var material2 = new MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
var mesh = new THREE.Mesh( geometry, material2 );
var mesh = new Mesh( geometry, material2 );
scene.add( mesh );
......@@ -161,9 +176,9 @@
bevelSegments: 1
};
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, materials );
var mesh = new Mesh( geometry, materials );
mesh.position.set( 50, 100, 50 );
......
examples/webgl_geometry_extrude_shapes2.html
浏览文件 @ 7ecfa2f9
......@@ -17,11 +17,27 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shapes extrusion via geodata
</div>
<script type="text/javascript" src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script type="module">
import {
AmbientLight,
Color,
DirectionalLight,
ExtrudeBufferGeometry,
GridHelper,
Group,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
Scene,
ShapePath,
Vector2,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
<script>
// From d3-threeD.js
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
......@@ -34,7 +50,7 @@
exports.transformSVGPath = function transformSVGPath( pathStr ) {
var path = new THREE.ShapePath();
var path = new ShapePath();
var idx = 1, len = pathStr.length, activeCmd,
x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
......@@ -282,8 +298,8 @@
cx = Math.cos( xar ) * x2 - Math.sin( xar ) * y2 + ( x + nx ) / 2;
cy = Math.sin( xar ) * x2 + Math.cos( xar ) * y2 + ( y + ny ) / 2;
var u = new THREE.Vector2( 1, 0 );
var v = new THREE.Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
var u = new Vector2( 1, 0 );
var v = new Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
var startAng = Math.acos( u.dot( v ) / u.length() / v.length() );
......@@ -341,8 +357,8 @@
for ( var i = 0; i < paths.length; i ++ ) {
var path = $d3g.transformSVGPath( paths[ i ] );
var color = new THREE.Color( colors[ i ] );
var material = new THREE.MeshLambertMaterial( {
var color = new Color( colors[ i ] );
var material = new MeshLambertMaterial( {
color: color,
emissive: color
} );
......@@ -352,12 +368,12 @@
for ( var j = 0; j < simpleShapes.length; j ++ ) {
var simpleShape = simpleShapes[ j ];
var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
var shape3d = new ExtrudeBufferGeometry( simpleShape, {
depth: depth,
bevelEnabled: false
} );
var mesh = new THREE.Mesh( shape3d, material );
var mesh = new Mesh( shape3d, material );
mesh.rotation.x = Math.PI;
mesh.translateZ( - depth - 1 );
mesh.translateX( - center.x );
......@@ -384,31 +400,31 @@
//
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xb0b0b0 );
scene = new Scene();
scene.background = new Color( 0xb0b0b0 );
//
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 200 );
//
var group = new THREE.Group();
var group = new Group();
scene.add( group );
//
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
var directionalLight = new DirectionalLight( 0xffffff, 0.6 );
directionalLight.position.set( 0.75, 0.75, 1.0 ).normalize();
scene.add( directionalLight );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
var ambientLight = new AmbientLight( 0xcccccc, 0.2 );
scene.add( ambientLight );
//
var helper = new THREE.GridHelper( 160, 10 );
var helper = new GridHelper( 160, 10 );
helper.rotation.x = Math.PI / 2;
group.add( helper );
......@@ -419,14 +435,14 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
//
......
examples/webgl_geometry_extrude_splines.html
浏览文件 @ 7ecfa2f9
......@@ -23,316 +23,328 @@
by <a href="http://www.lab4games.net/zz85/blog" target="_blank" rel="noopener">zz85</a>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<!-- where curves formulas are defined -->
<script src="js/curves/CurveExtras.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
var binormal = new THREE.Vector3();
var normal = new THREE.Vector3();
var pipeSpline = new THREE.CatmullRomCurve3( [
new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
new THREE.Vector3( - 10, 10, 30 ), new THREE.Vector3( - 10, 20, 30 ),
new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( - 10, 20, 10 ),
new THREE.Vector3( - 10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
new THREE.Vector3( 10, - 10, 10 ), new THREE.Vector3( 20, - 15, 10 ),
new THREE.Vector3( 30, - 15, 10 ), new THREE.Vector3( 40, - 15, 10 ),
new THREE.Vector3( 50, - 15, 10 ), new THREE.Vector3( 60, 0, 10 ),
new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
] );
var sampleClosedSpline = new THREE.CatmullRomCurve3( [
new THREE.Vector3( 0, - 40, - 40 ),
new THREE.Vector3( 0, 40, - 40 ),
new THREE.Vector3( 0, 140, - 40 ),
new THREE.Vector3( 0, 40, 40 ),
new THREE.Vector3( 0, - 40, 40 )
] );
sampleClosedSpline.curveType = 'catmullrom';
sampleClosedSpline.closed = true;
// Keep a dictionary of Curve instances
var splines = {
GrannyKnot: new THREE.Curves.GrannyKnot(),
HeartCurve: new THREE.Curves.HeartCurve( 3.5 ),
VivianiCurve: new THREE.Curves.VivianiCurve( 70 ),
KnotCurve: new THREE.Curves.KnotCurve(),
HelixCurve: new THREE.Curves.HelixCurve(),
TrefoilKnot: new THREE.Curves.TrefoilKnot(),
TorusKnot: new THREE.Curves.TorusKnot( 20 ),
CinquefoilKnot: new THREE.Curves.CinquefoilKnot( 20 ),
TrefoilPolynomialKnot: new THREE.Curves.TrefoilPolynomialKnot( 14 ),
FigureEightPolynomialKnot: new THREE.Curves.FigureEightPolynomialKnot(),
DecoratedTorusKnot4a: new THREE.Curves.DecoratedTorusKnot4a(),
DecoratedTorusKnot4b: new THREE.Curves.DecoratedTorusKnot4b(),
DecoratedTorusKnot5a: new THREE.Curves.DecoratedTorusKnot5a(),
DecoratedTorusKnot5c: new THREE.Curves.DecoratedTorusKnot5c(),
PipeSpline: pipeSpline,
SampleClosedSpline: sampleClosedSpline
};
var parent, tubeGeometry, mesh;
var params = {
spline: 'GrannyKnot',
scale: 4,
extrusionSegments: 100,
radiusSegments: 3,
closed: true,
animationView: false,
lookAhead: false,
cameraHelper: false,
};
var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
function addTube() {
if ( mesh !== undefined ) {
parent.remove( mesh );
mesh.geometry.dispose();
<script type="module">
import {
CameraHelper,
CatmullRomCurve3,
Color,
DirectionalLight,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
Object3D,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
TubeBufferGeometry,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { Curves } from './jsm/curves/CurveExtras.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var container, stats;
var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
var binormal = new Vector3();
var normal = new Vector3();
var pipeSpline = new CatmullRomCurve3( [
new Vector3( 0, 10, - 10 ), new Vector3( 10, 0, - 10 ),
new Vector3( 20, 0, 0 ), new Vector3( 30, 0, 10 ),
new Vector3( 30, 0, 20 ), new Vector3( 20, 0, 30 ),
new Vector3( 10, 0, 30 ), new Vector3( 0, 0, 30 ),
new Vector3( - 10, 10, 30 ), new Vector3( - 10, 20, 30 ),
new Vector3( 0, 30, 30 ), new Vector3( 10, 30, 30 ),
new Vector3( 20, 30, 15 ), new Vector3( 10, 30, 10 ),
new Vector3( 0, 30, 10 ), new Vector3( - 10, 20, 10 ),
new Vector3( - 10, 10, 10 ), new Vector3( 0, 0, 10 ),
new Vector3( 10, - 10, 10 ), new Vector3( 20, - 15, 10 ),
new Vector3( 30, - 15, 10 ), new Vector3( 40, - 15, 10 ),
new Vector3( 50, - 15, 10 ), new Vector3( 60, 0, 10 ),
new Vector3( 70, 0, 0 ), new Vector3( 80, 0, 0 ),
new Vector3( 90, 0, 0 ), new Vector3( 100, 0, 0 )
] );
var sampleClosedSpline = new CatmullRomCurve3( [
new Vector3( 0, - 40, - 40 ),
new Vector3( 0, 40, - 40 ),
new Vector3( 0, 140, - 40 ),
new Vector3( 0, 40, 40 ),
new Vector3( 0, - 40, 40 )
] );
sampleClosedSpline.curveType = 'catmullrom';
sampleClosedSpline.closed = true;
// Keep a dictionary of Curve instances
var splines = {
GrannyKnot: new Curves.GrannyKnot(),
HeartCurve: new Curves.HeartCurve( 3.5 ),
VivianiCurve: new Curves.VivianiCurve( 70 ),
KnotCurve: new Curves.KnotCurve(),
HelixCurve: new Curves.HelixCurve(),
TrefoilKnot: new Curves.TrefoilKnot(),
TorusKnot: new Curves.TorusKnot( 20 ),
CinquefoilKnot: new Curves.CinquefoilKnot( 20 ),
TrefoilPolynomialKnot: new Curves.TrefoilPolynomialKnot( 14 ),
FigureEightPolynomialKnot: new Curves.FigureEightPolynomialKnot(),
DecoratedTorusKnot4a: new Curves.DecoratedTorusKnot4a(),
DecoratedTorusKnot4b: new Curves.DecoratedTorusKnot4b(),
DecoratedTorusKnot5a: new Curves.DecoratedTorusKnot5a(),
DecoratedTorusKnot5c: new Curves.DecoratedTorusKnot5c(),
PipeSpline: pipeSpline,
SampleClosedSpline: sampleClosedSpline
};
var parent, tubeGeometry, mesh;
var params = {
spline: 'GrannyKnot',
scale: 4,
extrusionSegments: 100,
radiusSegments: 3,
closed: true,
animationView: false,
lookAhead: false,
cameraHelper: false,
};
var material = new MeshLambertMaterial( { color: 0xff00ff } );
var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
function addTube() {
if ( mesh !== undefined ) {
parent.remove( mesh );
mesh.geometry.dispose();
}
var extrudePath = splines[ params.spline ];
tubeGeometry = new TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
addGeometry( tubeGeometry );
}
var extrudePath = splines[ params.spline ];
tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
addGeometry( tubeGeometry );
setScale();
setScale();
}
}
function setScale() {
function setScale() {
mesh.scale.set( params.scale, params.scale, params.scale );
mesh.scale.set( params.scale, params.scale, params.scale );
}
}
function addGeometry( geometry ) {
function addGeometry( geometry ) {
// 3D shape
// 3D shape
mesh = new THREE.Mesh( geometry, material );
var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
mesh.add( wireframe );
mesh = new Mesh( geometry, material );
var wireframe = new Mesh( geometry, wireframeMaterial );
mesh.add( wireframe );
parent.add( mesh );
parent.add( mesh );
}
}
function animateCamera() {
function animateCamera() {
cameraHelper.visible = params.cameraHelper;
cameraEye.visible = params.cameraHelper;
cameraHelper.visible = params.cameraHelper;
cameraEye.visible = params.cameraHelper;
}
}
init();
animate();
init();
animate();
function init() {
function init() {
container = document.getElementById( 'container' );
container = document.getElementById( 'container' );
// camera
// camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
camera.position.set( 0, 50, 500 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
camera.position.set( 0, 50, 500 );
// scene
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
// light
// light
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
scene.add( light );
var light = new DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
scene.add( light );
// tube
// tube
parent = new THREE.Object3D();
scene.add( parent );
parent = new Object3D();
scene.add( parent );
splineCamera = new THREE.PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
parent.add( splineCamera );
splineCamera = new PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
parent.add( splineCamera );
cameraHelper = new THREE.CameraHelper( splineCamera );
scene.add( cameraHelper );
cameraHelper = new CameraHelper( splineCamera );
scene.add( cameraHelper );
addTube();
addTube();
// debug camera
// debug camera
cameraEye = new THREE.Mesh( new THREE.SphereBufferGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
parent.add( cameraEye );
cameraEye = new Mesh( new SphereBufferGeometry( 5 ), new MeshBasicMaterial( { color: 0xdddddd } ) );
parent.add( cameraEye );
cameraHelper.visible = params.cameraHelper;
cameraEye.visible = params.cameraHelper;
cameraHelper.visible = params.cameraHelper;
cameraEye.visible = params.cameraHelper;
// renderer
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// stats
// stats
stats = new Stats();
container.appendChild( stats.dom );
stats = new Stats();
container.appendChild( stats.dom );
// dat.GUI
// dat.GUI
var gui = new dat.GUI( { width: 300 } );
var gui = new GUI( { width: 300 } );
var folderGeometry = gui.addFolder( 'Geometry' );
folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
var folderGeometry = gui.addFolder( 'Geometry' );
folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
addTube();
addTube();
} );
folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {
} );
folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {
setScale();
setScale();
} );
folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {
} );
folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {
addTube();
addTube();
} );
folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {
} );
folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {
addTube();
addTube();
} );
folderGeometry.add( params, 'closed' ).onChange( function () {
} );
folderGeometry.add( params, 'closed' ).onChange( function () {
addTube();
addTube();
} );
folderGeometry.open();
} );
folderGeometry.open();
var folderCamera = gui.addFolder( 'Camera' );
folderCamera.add( params, 'animationView' ).onChange( function () {
var folderCamera = gui.addFolder( 'Camera' );
folderCamera.add( params, 'animationView' ).onChange( function () {
animateCamera();
animateCamera();
} );
folderCamera.add( params, 'lookAhead' ).onChange( function () {
} );
folderCamera.add( params, 'lookAhead' ).onChange( function () {
animateCamera();
animateCamera();
} );
folderCamera.add( params, 'cameraHelper' ).onChange( function () {
} );
folderCamera.add( params, 'cameraHelper' ).onChange( function () {
animateCamera();
animateCamera();
} );
folderCamera.open();
} );
folderCamera.open();
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'resize', onWindowResize, false );
}
}
function onWindowResize() {
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
//
//
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
render();
stats.update();
render();
stats.update();
}
}
function render() {
function render() {
// animate camera along spline
// animate camera along spline
var time = Date.now();
var looptime = 20 * 1000;
var t = ( time % looptime ) / looptime;
var time = Date.now();
var looptime = 20 * 1000;
var t = ( time % looptime ) / looptime;
var pos = tubeGeometry.parameters.path.getPointAt( t );
pos.multiplyScalar( params.scale );
var pos = tubeGeometry.parameters.path.getPointAt( t );
pos.multiplyScalar( params.scale );
// interpolation
// interpolation
var segments = tubeGeometry.tangents.length;
var pickt = t * segments;
var pick = Math.floor( pickt );
var pickNext = ( pick + 1 ) % segments;
var segments = tubeGeometry.tangents.length;
var pickt = t * segments;
var pick = Math.floor( pickt );
var pickNext = ( pick + 1 ) % segments;
binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );
binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );
var dir = tubeGeometry.parameters.path.getTangentAt( t );
var offset = 15;
var dir = tubeGeometry.parameters.path.getTangentAt( t );
var offset = 15;
normal.copy( binormal ).cross( dir );
normal.copy( binormal ).cross( dir );
// we move on a offset on its binormal
// we move on a offset on its binormal
pos.add( normal.clone().multiplyScalar( offset ) );
pos.add( normal.clone().multiplyScalar( offset ) );
splineCamera.position.copy( pos );
cameraEye.position.copy( pos );
splineCamera.position.copy( pos );
cameraEye.position.copy( pos );
// using arclength for stablization in look ahead
// using arclength for stablization in look ahead
var lookAt = tubeGeometry.parameters.path.getPointAt( ( t + 30 / tubeGeometry.parameters.path.getLength() ) % 1 ).multiplyScalar( params.scale );
var lookAt = tubeGeometry.parameters.path.getPointAt( ( t + 30 / tubeGeometry.parameters.path.getLength() ) % 1 ).multiplyScalar( params.scale );
// camera orientation 2 - up orientation via normal
// camera orientation 2 - up orientation via normal
if ( ! params.lookAhead ) lookAt.copy( pos ).add( dir );
splineCamera.matrix.lookAt( splineCamera.position, lookAt, normal );
splineCamera.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );
if ( ! params.lookAhead ) lookAt.copy( pos ).add( dir );
splineCamera.matrix.lookAt( splineCamera.position, lookAt, normal );
splineCamera.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );
cameraHelper.update();
cameraHelper.update();
renderer.render( scene, params.animationView === true ? splineCamera : camera );
renderer.render( scene, params.animationView === true ? splineCamera : camera );
}
}
</script>
</script>
</body>
</html>
examples/webgl_geometry_hierarchy.html
浏览文件 @ 7ecfa2f9
......@@ -8,10 +8,20 @@
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
Color,
Fog,
Group,
Mesh,
MeshNormalMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var camera, scene, renderer, stats, group;
......@@ -25,21 +35,21 @@
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
scene = new Scene();
scene.background = new Color( 0xffffff );
scene.fog = new Fog( 0xffffff, 1, 10000 );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
var geometry = new BoxBufferGeometry( 100, 100, 100 );
var material = new MeshNormalMaterial();
group = new THREE.Group();
group = new Group();
for ( var i = 0; i < 1000; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 2000 - 1000;
mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
......@@ -58,7 +68,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometry_hierarchy2.html
浏览文件 @ 7ecfa2f9
......@@ -8,10 +8,18 @@
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
Color,
Mesh,
MeshNormalMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var camera, scene, renderer, stats, root;
......@@ -25,16 +33,16 @@
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
var geometry = new BoxBufferGeometry( 100, 100, 100 );
var material = new MeshNormalMaterial();
root = new THREE.Mesh( geometry, material );
root = new Mesh( geometry, material );
root.position.x = 1000;
scene.add( root );
......@@ -42,7 +50,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.x = 100;
parent.add( object );
......@@ -54,7 +62,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.x = - 100;
parent.add( object );
......@@ -66,7 +74,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.y = - 100;
parent.add( object );
......@@ -78,7 +86,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.y = 100;
parent.add( object );
......@@ -90,7 +98,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.z = - 100;
parent.add( object );
......@@ -102,7 +110,7 @@
for ( var i = 0; i < amount; i ++ ) {
object = new THREE.Mesh( geometry, material );
object = new Mesh( geometry, material );
object.position.z = 100;
parent.add( object );
......@@ -112,7 +120,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometry_minecraft.html
浏览文件 @ 7ecfa2f9
......@@ -20,22 +20,29 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="http://www.minecraft.net/" target="_blank" rel="noopener">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank" rel="noopener">painterly pack</a><br />(left click: forward, right click: backward)</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/utils/BufferGeometryUtils.js"></script>
<script src="js/math/ImprovedNoise.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
Clock,
Color,
DirectionalLight,
DoubleSide,
Matrix4,
Mesh,
MeshLambertMaterial,
NearestFilter,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
var container, stats;
......@@ -46,7 +53,7 @@
var worldHalfDepth = worldDepth / 2;
var data = generateHeight( worldWidth, worldDepth );
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
......@@ -55,46 +62,46 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.movementSpeed = 1000;
controls.lookSpeed = 0.125;
controls.lookVertical = true;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xbfd1e5 );
scene = new Scene();
scene.background = new Color( 0xbfd1e5 );
// sides
var matrix = new THREE.Matrix4();
var matrix = new Matrix4();
var pxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var pxGeometry = new PlaneBufferGeometry( 100, 100 );
pxGeometry.attributes.uv.array[ 1 ] = 0.5;
pxGeometry.attributes.uv.array[ 3 ] = 0.5;
pxGeometry.rotateY( Math.PI / 2 );
pxGeometry.translate( 50, 0, 0 );
var nxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var nxGeometry = new PlaneBufferGeometry( 100, 100 );
nxGeometry.attributes.uv.array[ 1 ] = 0.5;
nxGeometry.attributes.uv.array[ 3 ] = 0.5;
nxGeometry.rotateY( - Math.PI / 2 );
nxGeometry.translate( - 50, 0, 0 );
var pyGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var pyGeometry = new PlaneBufferGeometry( 100, 100 );
pyGeometry.attributes.uv.array[ 5 ] = 0.5;
pyGeometry.attributes.uv.array[ 7 ] = 0.5;
pyGeometry.rotateX( - Math.PI / 2 );
pyGeometry.translate( 0, 50, 0 );
var pzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var pzGeometry = new PlaneBufferGeometry( 100, 100 );
pzGeometry.attributes.uv.array[ 1 ] = 0.5;
pzGeometry.attributes.uv.array[ 3 ] = 0.5;
pzGeometry.translate( 0, 0, 50 );
var nzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
var nzGeometry = new PlaneBufferGeometry( 100, 100 );
nzGeometry.attributes.uv.array[ 1 ] = 0.5;
nzGeometry.attributes.uv.array[ 3 ] = 0.5;
nzGeometry.rotateY( Math.PI );
......@@ -151,23 +158,23 @@
}
var geometry = THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
var geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
geometry.computeBoundingSphere();
var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
texture.magFilter = THREE.NearestFilter;
var texture = new TextureLoader().load( 'textures/minecraft/atlas.png' );
texture.magFilter = NearestFilter;
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
var mesh = new Mesh( geometry, new MeshLambertMaterial( { map: texture, side: DoubleSide } ) );
scene.add( mesh );
var ambientLight = new THREE.AmbientLight( 0xcccccc );
var ambientLight = new AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
var directionalLight = new DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -194,7 +201,7 @@
function generateHeight( width, height ) {
var data = [], perlin = new THREE.ImprovedNoise(),
var data = [], perlin = new ImprovedNoise(),
size = width * height, quality = 2, z = Math.random() * 100;
for ( var j = 0; j < 4; j ++ ) {
......
examples/webgl_geometry_minecraft_ao.html
浏览文件 @ 7ecfa2f9
......@@ -22,22 +22,33 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="http://www.minecraft.net/" target="_blank" rel="noopener">minecraft</a> demo [ambient occlusion]. featuring <a href="http://painterlypack.net/" target="_blank" rel="noopener">painterly pack</a><br />(left click: forward, right click: backward)
</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/math/ImprovedNoise.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BufferGeometry,
Clock,
Color,
DirectionalLight,
DoubleSide,
FogExp2,
Geometry,
LinearMipMapLinearFilter,
Matrix4,
Mesh,
MeshLambertMaterial,
NearestFilter,
PerspectiveCamera,
PlaneGeometry,
Scene,
TextureLoader,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
var container, stats;
......@@ -48,7 +59,7 @@
var worldHalfDepth = worldDepth / 2;
var data = generateHeight( worldWidth, worldDepth );
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
......@@ -57,10 +68,10 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.movementSpeed = 1000;
controls.lookSpeed = 0.125;
......@@ -69,18 +80,18 @@
controls.verticalMin = 1.1;
controls.verticalMax = 2.2;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
scene = new Scene();
scene.background = new Color( 0xffffff );
scene.fog = new FogExp2( 0xffffff, 0.00015 );
// sides
var light = new THREE.Color( 0xffffff );
var shadow = new THREE.Color( 0x505050 );
var light = new Color( 0xffffff );
var shadow = new Color( 0x505050 );
var matrix = new THREE.Matrix4();
var matrix = new Matrix4();
var pxGeometry = new THREE.PlaneGeometry( 100, 100 );
var pxGeometry = new PlaneGeometry( 100, 100 );
pxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
pxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
pxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
......@@ -89,7 +100,7 @@
pxGeometry.rotateY( Math.PI / 2 );
pxGeometry.translate( 50, 0, 0 );
var nxGeometry = new THREE.PlaneGeometry( 100, 100 );
var nxGeometry = new PlaneGeometry( 100, 100 );
nxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
nxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
nxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
......@@ -98,7 +109,7 @@
nxGeometry.rotateY( - Math.PI / 2 );
nxGeometry.translate( - 50, 0, 0 );
var pyGeometry = new THREE.PlaneGeometry( 100, 100 );
var pyGeometry = new PlaneGeometry( 100, 100 );
pyGeometry.faces[ 0 ].vertexColors = [ light, light, light ];
pyGeometry.faces[ 1 ].vertexColors = [ light, light, light ];
pyGeometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
......@@ -107,7 +118,7 @@
pyGeometry.rotateX( - Math.PI / 2 );
pyGeometry.translate( 0, 50, 0 );
var py2Geometry = new THREE.PlaneGeometry( 100, 100 );
var py2Geometry = new PlaneGeometry( 100, 100 );
py2Geometry.faces[ 0 ].vertexColors = [ light, light, light ];
py2Geometry.faces[ 1 ].vertexColors = [ light, light, light ];
py2Geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
......@@ -117,7 +128,7 @@
py2Geometry.rotateY( Math.PI / 2 );
py2Geometry.translate( 0, 50, 0 );
var pzGeometry = new THREE.PlaneGeometry( 100, 100 );
var pzGeometry = new PlaneGeometry( 100, 100 );
pzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
pzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
pzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
......@@ -125,7 +136,7 @@
pzGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
pzGeometry.translate( 0, 0, 50 );
var nzGeometry = new THREE.PlaneGeometry( 100, 100 );
var nzGeometry = new PlaneGeometry( 100, 100 );
nzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
nzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
nzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
......@@ -136,7 +147,7 @@
//
var geometry = new THREE.Geometry();
var geometry = new Geometry();
for ( var z = 0; z < worldDepth; z ++ ) {
......@@ -251,26 +262,26 @@
}
geometry = new THREE.BufferGeometry().fromGeometry( geometry );
geometry = new BufferGeometry().fromGeometry( geometry );
var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var texture = new TextureLoader().load( 'textures/minecraft/atlas.png' );
texture.magFilter = NearestFilter;
texture.minFilter = LinearMipMapLinearFilter;
var mesh = new THREE.Mesh(
var mesh = new Mesh(
geometry,
new THREE.MeshLambertMaterial( { map: texture, vertexColors: THREE.VertexColors, side: THREE.DoubleSide } )
new MeshLambertMaterial( { map: texture, vertexColors: VertexColors, side: DoubleSide } )
);
scene.add( mesh );
var ambientLight = new THREE.AmbientLight( 0xcccccc );
var ambientLight = new AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
var directionalLight = new DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -297,7 +308,7 @@
function generateHeight( width, height ) {
var data = [], perlin = new THREE.ImprovedNoise(),
var data = [], perlin = new ImprovedNoise(),
size = width * height, quality = 2, z = Math.random() * 100;
for ( var j = 0; j < 4; j ++ ) {
......
examples/webgl_geometry_normals.html
浏览文件 @ 7ecfa2f9
......@@ -13,35 +13,53 @@
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="./js/libs/dat.gui.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
CircleBufferGeometry,
CylinderBufferGeometry,
IcosahedronBufferGeometry,
Mesh,
MeshBasicMaterial,
OctahedronBufferGeometry,
PerspectiveCamera,
PlaneBufferGeometry,
RingBufferGeometry,
Scene,
SphereBufferGeometry,
TorusBufferGeometry,
TorusKnotBufferGeometry,
VertexNormalsHelper,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var container, stats, gui;
var camera, scene, renderer;
var mesh, geometry;
var geometries = [
new THREE.BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
new THREE.CircleBufferGeometry( 200, 32 ),
new THREE.CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
new THREE.IcosahedronBufferGeometry( 100, 1 ),
new THREE.OctahedronBufferGeometry( 200, 0 ),
new THREE.PlaneBufferGeometry( 200, 200, 4, 4 ),
new THREE.RingBufferGeometry( 32, 64, 16 ),
new THREE.SphereBufferGeometry( 100, 12, 12 ),
new THREE.TorusBufferGeometry( 64, 16, 12, 12 ),
new THREE.TorusKnotBufferGeometry( 64, 16 )
new BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
new CircleBufferGeometry( 200, 32 ),
new CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
new IcosahedronBufferGeometry( 100, 1 ),
new OctahedronBufferGeometry( 200, 0 ),
new PlaneBufferGeometry( 200, 200, 4, 4 ),
new RingBufferGeometry( 32, 64, 16 ),
new SphereBufferGeometry( 100, 12, 12 ),
new TorusBufferGeometry( 64, 16, 12, 12 ),
new TorusKnotBufferGeometry( 64, 16 )
];
var options = {
Geometry: 0
};
var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
var material = new MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
init();
animate();
......@@ -64,10 +82,10 @@
var scaleFactor = 160 / geometry.boundingSphere.radius;
geometry.scale( scaleFactor, scaleFactor, scaleFactor );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
scene.add( mesh );
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
var vertexNormalsHelper = new VertexNormalsHelper( mesh, 10 );
mesh.add( vertexNormalsHelper );
}
......@@ -76,16 +94,16 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene = new Scene();
addMesh();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -110,7 +128,7 @@
TorusKnotBufferGeometry: 9
};
gui = new dat.GUI( { width: 350 } );
gui = new GUI( { width: 350 } );
gui.add( options, 'Geometry', geometries ).onChange( function () {
addMesh();
......@@ -119,7 +137,7 @@
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
//
......
examples/webgl_geometry_nurbs.html
浏览文件 @ 7ecfa2f9
......@@ -20,13 +20,32 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - NURBS curve and surface example
</div>
<script src="../build/three.js"></script>
<script src="js/curves/NURBSCurve.js"></script>
<script src="js/curves/NURBSSurface.js"></script>
<script src="js/curves/NURBSUtils.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
AmbientLight,
BufferGeometry,
Color,
DirectionalLight,
DoubleSide,
Group,
Line,
LineBasicMaterial,
Math as _Math,
Mesh,
MeshLambertMaterial,
ParametricBufferGeometry,
PerspectiveCamera,
RepeatWrapping,
Scene,
TextureLoader,
Vector4,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { NURBSCurve } from './jsm/curves/NURBSCurve.js';
import { NURBSSurface } from './jsm/curves/NURBSSurface.js';
var container, stats;
......@@ -49,19 +68,19 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0, 150, 750 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
scene.add( new THREE.AmbientLight( 0x808080 ) );
scene.add( new AmbientLight( 0x808080 ) );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
var light = new DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 );
scene.add( light );
group = new THREE.Group();
group = new Group();
group.position.y = 50;
scene.add( group );
......@@ -80,7 +99,7 @@
for ( var i = 0, j = 20; i < j; i ++ ) {
nurbsControlPoints.push(
new THREE.Vector4(
new Vector4(
Math.random() * 400 - 200,
Math.random() * 400,
Math.random() * 400 - 200,
......@@ -89,27 +108,27 @@
);
var knot = ( i + 1 ) / ( j - nurbsDegree );
nurbsKnots.push( THREE.Math.clamp( knot, 0, 1 ) );
nurbsKnots.push( _Math.clamp( knot, 0, 1 ) );
}
var nurbsCurve = new THREE.NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
var nurbsCurve = new NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
var nurbsGeometry = new THREE.BufferGeometry();
var nurbsGeometry = new BufferGeometry();
nurbsGeometry.setFromPoints( nurbsCurve.getPoints( 200 ) );
var nurbsMaterial = new THREE.LineBasicMaterial( { color: 0x333333 } );
var nurbsMaterial = new LineBasicMaterial( { color: 0x333333 } );
var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
var nurbsLine = new Line( nurbsGeometry, nurbsMaterial );
nurbsLine.position.set( 200, - 100, 0 );
group.add( nurbsLine );
var nurbsControlPointsGeometry = new THREE.BufferGeometry();
var nurbsControlPointsGeometry = new BufferGeometry();
nurbsControlPointsGeometry.setFromPoints( nurbsCurve.controlPoints );
var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
var nurbsControlPointsMaterial = new LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
var nurbsControlPointsLine = new Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
nurbsControlPointsLine.position.copy( nurbsLine.position );
group.add( nurbsControlPointsLine );
......@@ -117,32 +136,32 @@
var nsControlPoints = [
[
new THREE.Vector4( - 200, - 200, 100, 1 ),
new THREE.Vector4( - 200, - 100, - 200, 1 ),
new THREE.Vector4( - 200, 100, 250, 1 ),
new THREE.Vector4( - 200, 200, - 100, 1 )
new Vector4( - 200, - 200, 100, 1 ),
new Vector4( - 200, - 100, - 200, 1 ),
new Vector4( - 200, 100, 250, 1 ),
new Vector4( - 200, 200, - 100, 1 )
],
[
new THREE.Vector4( 0, - 200, 0, 1 ),
new THREE.Vector4( 0, - 100, - 100, 5 ),
new THREE.Vector4( 0, 100, 150, 5 ),
new THREE.Vector4( 0, 200, 0, 1 )
new Vector4( 0, - 200, 0, 1 ),
new Vector4( 0, - 100, - 100, 5 ),
new Vector4( 0, 100, 150, 5 ),
new Vector4( 0, 200, 0, 1 )
],
[
new THREE.Vector4( 200, - 200, - 100, 1 ),
new THREE.Vector4( 200, - 100, 200, 1 ),
new THREE.Vector4( 200, 100, - 250, 1 ),
new THREE.Vector4( 200, 200, 100, 1 )
new Vector4( 200, - 200, - 100, 1 ),
new Vector4( 200, - 100, 200, 1 ),
new Vector4( 200, 100, - 250, 1 ),
new Vector4( 200, 200, 100, 1 )
]
];
var degree1 = 2;
var degree2 = 3;
var knots1 = [ 0, 0, 0, 1, 1, 1 ];
var knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
var nurbsSurface = new THREE.NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
var nurbsSurface = new NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = RepeatWrapping;
map.anisotropy = 16;
function getSurfacePoint( u, v, target ) {
......@@ -151,16 +170,16 @@
}
var geometry = new THREE.ParametricBufferGeometry( getSurfacePoint, 20, 20 );
var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
var object = new THREE.Mesh( geometry, material );
var geometry = new ParametricBufferGeometry( getSurfacePoint, 20, 20 );
var material = new MeshLambertMaterial( { map: map, side: DoubleSide } );
var object = new Mesh( geometry, material );
object.position.set( - 200, 100, 0 );
object.scale.multiplyScalar( 1 );
group.add( object );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/webgl_geometry_shapes.html
浏览文件 @ 7ecfa2f9
......@@ -16,10 +16,32 @@
<div id="info">Simple procedurally-generated shapes</div>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BufferGeometry,
Color,
DoubleSide,
ExtrudeBufferGeometry,
Group,
Line,
LineBasicMaterial,
Mesh,
MeshPhongMaterial,
Path,
PerspectiveCamera,
PointLight,
Points,
PointsMaterial,
RepeatWrapping,
Scene,
Shape,
ShapeBufferGeometry,
TextureLoader,
Vector2,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var container, stats;
......@@ -43,26 +65,26 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );
scene.add( camera );
var light = new THREE.PointLight( 0xffffff, 0.8 );
var light = new PointLight( 0xffffff, 0.8 );
camera.add( light );
group = new THREE.Group();
group = new Group();
group.position.y = 50;
scene.add( group );
var loader = new THREE.TextureLoader();
var loader = new TextureLoader();
var texture = loader.load( "textures/UV_Grid_Sm.jpg" );
// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = texture.wrapT = RepeatWrapping;
texture.repeat.set( 0.008, 0.008 );
function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
......@@ -70,9 +92,9 @@
// flat shape with texture
// note: default UVs generated by ShapeBufferGeometry are simply the x- and y-coordinates of the vertices
var geometry = new THREE.ShapeBufferGeometry( shape );
var geometry = new ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
var mesh = new Mesh( geometry, new MeshPhongMaterial( { side: DoubleSide, map: texture } ) );
mesh.position.set( x, y, z - 175 );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
......@@ -80,9 +102,9 @@
// flat shape
var geometry = new THREE.ShapeBufferGeometry( shape );
var geometry = new ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
var mesh = new Mesh( geometry, new MeshPhongMaterial( { color: color, side: DoubleSide } ) );
mesh.position.set( x, y, z - 125 );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
......@@ -90,9 +112,9 @@
// extruded shape
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
var mesh = new Mesh( geometry, new MeshPhongMaterial( { color: color } ) );
mesh.position.set( x, y, z - 75 );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
......@@ -111,12 +133,12 @@
var points = shape.getPoints();
var spacedPoints = shape.getSpacedPoints( 50 );
var geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
var geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );
var geometryPoints = new BufferGeometry().setFromPoints( points );
var geometrySpacedPoints = new BufferGeometry().setFromPoints( spacedPoints );
// solid line
var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
var line = new Line( geometryPoints, new LineBasicMaterial( { color: color } ) );
line.position.set( x, y, z - 25 );
line.rotation.set( rx, ry, rz );
line.scale.set( s, s, s );
......@@ -124,7 +146,7 @@
// line from equidistance sampled points
var line = new THREE.Line( geometrySpacedPoints, new THREE.LineBasicMaterial( { color: color } ) );
var line = new Line( geometrySpacedPoints, new LineBasicMaterial( { color: color } ) );
line.position.set( x, y, z + 25 );
line.rotation.set( rx, ry, rz );
line.scale.set( s, s, s );
......@@ -132,7 +154,7 @@
// vertices from real points
var particles = new THREE.Points( geometryPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
var particles = new Points( geometryPoints, new PointsMaterial( { color: color, size: 4 } ) );
particles.position.set( x, y, z + 75 );
particles.rotation.set( rx, ry, rz );
particles.scale.set( s, s, s );
......@@ -140,7 +162,7 @@
// equidistance sampled points
var particles = new THREE.Points( geometrySpacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
var particles = new Points( geometrySpacedPoints, new PointsMaterial( { color: color, size: 4 } ) );
particles.position.set( x, y, z + 125 );
particles.rotation.set( rx, ry, rz );
particles.scale.set( s, s, s );
......@@ -153,37 +175,37 @@
var californiaPts = [];
californiaPts.push( new THREE.Vector2( 610, 320 ) );
californiaPts.push( new THREE.Vector2( 450, 300 ) );
californiaPts.push( new THREE.Vector2( 392, 392 ) );
californiaPts.push( new THREE.Vector2( 266, 438 ) );
californiaPts.push( new THREE.Vector2( 190, 570 ) );
californiaPts.push( new THREE.Vector2( 190, 600 ) );
californiaPts.push( new THREE.Vector2( 160, 620 ) );
californiaPts.push( new THREE.Vector2( 160, 650 ) );
californiaPts.push( new THREE.Vector2( 180, 640 ) );
californiaPts.push( new THREE.Vector2( 165, 680 ) );
californiaPts.push( new THREE.Vector2( 150, 670 ) );
californiaPts.push( new THREE.Vector2( 90, 737 ) );
californiaPts.push( new THREE.Vector2( 80, 795 ) );
californiaPts.push( new THREE.Vector2( 50, 835 ) );
californiaPts.push( new THREE.Vector2( 64, 870 ) );
californiaPts.push( new THREE.Vector2( 60, 945 ) );
californiaPts.push( new THREE.Vector2( 300, 945 ) );
californiaPts.push( new THREE.Vector2( 300, 743 ) );
californiaPts.push( new THREE.Vector2( 600, 473 ) );
californiaPts.push( new THREE.Vector2( 626, 425 ) );
californiaPts.push( new THREE.Vector2( 600, 370 ) );
californiaPts.push( new THREE.Vector2( 610, 320 ) );
californiaPts.push( new Vector2( 610, 320 ) );
californiaPts.push( new Vector2( 450, 300 ) );
californiaPts.push( new Vector2( 392, 392 ) );
californiaPts.push( new Vector2( 266, 438 ) );
californiaPts.push( new Vector2( 190, 570 ) );
californiaPts.push( new Vector2( 190, 600 ) );
californiaPts.push( new Vector2( 160, 620 ) );
californiaPts.push( new Vector2( 160, 650 ) );
californiaPts.push( new Vector2( 180, 640 ) );
californiaPts.push( new Vector2( 165, 680 ) );
californiaPts.push( new Vector2( 150, 670 ) );
californiaPts.push( new Vector2( 90, 737 ) );
californiaPts.push( new Vector2( 80, 795 ) );
californiaPts.push( new Vector2( 50, 835 ) );
californiaPts.push( new Vector2( 64, 870 ) );
californiaPts.push( new Vector2( 60, 945 ) );
californiaPts.push( new Vector2( 300, 945 ) );
californiaPts.push( new Vector2( 300, 743 ) );
californiaPts.push( new Vector2( 600, 473 ) );
californiaPts.push( new Vector2( 626, 425 ) );
californiaPts.push( new Vector2( 600, 370 ) );
californiaPts.push( new Vector2( 610, 320 ) );
for ( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
var californiaShape = new THREE.Shape( californiaPts );
var californiaShape = new Shape( californiaPts );
// Triangle
var triangleShape = new THREE.Shape();
var triangleShape = new Shape();
triangleShape.moveTo( 80, 20 );
triangleShape.lineTo( 40, 80 );
triangleShape.lineTo( 120, 80 );
......@@ -194,7 +216,7 @@
var x = 0, y = 0;
var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
var heartShape = new Shape(); // From http://blog.burlock.org/html5/130-paths
heartShape.moveTo( x + 25, y + 25 );
heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
......@@ -209,7 +231,7 @@
var sqLength = 80;
var squareShape = new THREE.Shape();
var squareShape = new Shape();
squareShape.moveTo( 0, 0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
......@@ -221,7 +243,7 @@
var rectLength = 120, rectWidth = 40;
var rectShape = new THREE.Shape();
var rectShape = new Shape();
rectShape.moveTo( 0, 0 );
rectShape.lineTo( 0, rectWidth );
rectShape.lineTo( rectLength, rectWidth );
......@@ -231,7 +253,7 @@
// Rounded rectangle
var roundedRectShape = new THREE.Shape();
var roundedRectShape = new Shape();
( function roundedRect( ctx, x, y, width, height, radius ) {
......@@ -250,7 +272,7 @@
// Track
var trackShape = new THREE.Shape();
var trackShape = new Shape();
trackShape.moveTo( 40, 40 );
trackShape.lineTo( 40, 160 );
......@@ -262,7 +284,7 @@
// Circle
var circleRadius = 40;
var circleShape = new THREE.Shape();
var circleShape = new Shape();
circleShape.moveTo( 0, circleRadius );
circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
......@@ -274,7 +296,7 @@
var x = y = 0;
var fishShape = new THREE.Shape();
var fishShape = new Shape();
fishShape.moveTo( x, y );
fishShape.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 );
......@@ -286,11 +308,11 @@
// Arc circle
var arcShape = new THREE.Shape();
var arcShape = new Shape();
arcShape.moveTo( 50, 10 );
arcShape.absarc( 10, 10, 40, 0, Math.PI * 2, false );
var holePath = new THREE.Path();
var holePath = new Path();
holePath.moveTo( 20, 10 );
holePath.absarc( 10, 10, 10, 0, Math.PI * 2, true );
arcShape.holes.push( holePath );
......@@ -298,22 +320,22 @@
// Smiley
var smileyShape = new THREE.Shape();
var smileyShape = new Shape();
smileyShape.moveTo( 80, 40 );
smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );
var smileyEye1Path = new THREE.Path();
var smileyEye1Path = new Path();
smileyEye1Path.moveTo( 35, 20 );
smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
smileyShape.holes.push( smileyEye1Path );
var smileyEye2Path = new THREE.Path();
var smileyEye2Path = new Path();
smileyEye2Path.moveTo( 65, 20 );
smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI * 2, true );
smileyShape.holes.push( smileyEye2Path );
var smileyMouthPath = new THREE.Path();
var smileyMouthPath = new Path();
smileyMouthPath.moveTo( 20, 40 );
smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
......@@ -326,12 +348,12 @@
// Spline shape
var splinepts = [];
splinepts.push( new THREE.Vector2( 70, 20 ) );
splinepts.push( new THREE.Vector2( 80, 90 ) );
splinepts.push( new THREE.Vector2( - 30, 70 ) );
splinepts.push( new THREE.Vector2( 0, 0 ) );
splinepts.push( new Vector2( 70, 20 ) );
splinepts.push( new Vector2( 80, 90 ) );
splinepts.push( new Vector2( - 30, 70 ) );
splinepts.push( new Vector2( 0, 0 ) );
var splineShape = new THREE.Shape();
var splineShape = new Shape();
splineShape.moveTo( 0, 0 );
splineShape.splineThru( splinepts );
......@@ -361,7 +383,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/webgl_geometry_spline_editor.html
浏览文件 @ 7ecfa2f9
......@@ -22,16 +22,35 @@
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
</div>
<script src="../build/three.js"></script>
<script src="js/controls/DragControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
BufferAttribute,
BufferGeometry,
CatmullRomCurve3,
Color,
GridHelper,
LightShadow,
Line,
LineBasicMaterial,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
ShadowMaterial,
SpotLight,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { DragControls } from './jsm/controls/DragControls.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { TransformControls } from './jsm/controls/TransformControls.js';
String.prototype.format = function () {
......@@ -51,9 +70,9 @@
var splineHelperObjects = [];
var splinePointsLength = 4;
var positions = [];
var point = new THREE.Vector3();
var point = new Vector3();
var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
var geometry = new BoxBufferGeometry( 20, 20, 20 );
var transformControl;
var ARC_SEGMENTS = 200;
......@@ -77,43 +96,43 @@
container = document.getElementById( 'container' );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 250, 1000 );
scene.add( camera );
scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
var light = new THREE.SpotLight( 0xffffff, 1.5 );
scene.add( new AmbientLight( 0xf0f0f0 ) );
var light = new SpotLight( 0xffffff, 1.5 );
light.position.set( 0, 1500, 200 );
light.castShadow = true;
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
light.shadow = new LightShadow( new PerspectiveCamera( 70, 1, 200, 2000 ) );
light.shadow.bias = - 0.000222;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add( light );
var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
var planeGeometry = new PlaneBufferGeometry( 2000, 2000 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
var planeMaterial = new ShadowMaterial( { opacity: 0.2 } );
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
var plane = new Mesh( planeGeometry, planeMaterial );
plane.position.y = - 200;
plane.receiveShadow = true;
scene.add( plane );
var helper = new THREE.GridHelper( 2000, 100 );
var helper = new GridHelper( 2000, 100 );
helper.position.y = - 199;
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add( helper );
//var axes = new THREE.AxesHelper( 1000 );
//var axes = new AxesHelper( 1000 );
//axes.position.set( - 500, - 500, - 500 );
//scene.add( axes );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
......@@ -122,7 +141,7 @@
stats = new Stats();
container.appendChild( stats.dom );
var gui = new dat.GUI();
var gui = new GUI();
gui.add( params, 'uniform' );
gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
......@@ -139,7 +158,7 @@
gui.open();
// Controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.damping = 0.2;
controls.addEventListener( 'change', render );
......@@ -155,7 +174,7 @@
} );
transformControl = new THREE.TransformControls( camera, renderer.domElement );
transformControl = new TransformControls( camera, renderer.domElement );
transformControl.addEventListener( 'change', render );
transformControl.addEventListener( 'dragging-changed', function ( event ) {
......@@ -189,7 +208,7 @@
} );
var dragcontrols = new THREE.DragControls( splineHelperObjects, camera, renderer.domElement ); //
var dragcontrols = new DragControls( splineHelperObjects, camera, renderer.domElement ); //
dragcontrols.enabled = false;
dragcontrols.addEventListener( 'hoveron', function ( event ) {
......@@ -247,30 +266,30 @@
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
var geometry = new BufferGeometry();
geometry.addAttribute( 'position', new BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
var curve = new THREE.CatmullRomCurve3( positions );
var curve = new CatmullRomCurve3( positions );
curve.curveType = 'catmullrom';
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
color: 0xff0000,
opacity: 0.35
} ) );
curve.mesh.castShadow = true;
splines.uniform = curve;
curve = new THREE.CatmullRomCurve3( positions );
curve = new CatmullRomCurve3( positions );
curve.curveType = 'centripetal';
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
color: 0x00ff00,
opacity: 0.35
} ) );
curve.mesh.castShadow = true;
splines.centripetal = curve;
curve = new THREE.CatmullRomCurve3( positions );
curve = new CatmullRomCurve3( positions );
curve.curveType = 'chordal';
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
color: 0x0000ff,
opacity: 0.35
} ) );
......@@ -284,17 +303,17 @@
}
load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
new THREE.Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
load( [ new Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
new Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
new Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
new Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
}
function addSplineObject( position ) {
var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
var object = new THREE.Mesh( geometry, material );
var material = new MeshLambertMaterial( { color: Math.random() * 0xffffff } );
var object = new Mesh( geometry, material );
if ( position ) {
......@@ -371,7 +390,7 @@
for ( var i = 0; i < splinePointsLength; i ++ ) {
var p = splineHelperObjects[ i ].position;
strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
strplace.push( 'new Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
}
......
examples/webgl_geometry_teapot.html
浏览文件 @ 7ecfa2f9
......@@ -12,24 +12,28 @@
from <a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank" rel="noopener">Udacity Interactive 3D Graphics</a>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
<script src='js/geometries/TeapotBufferGeometry.js'></script>
<script>
////////////////////////////////////////////////////////////////////////////////
// Utah/Newell Teapot demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, WEBGL, dat, window */
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
Color,
CubeTextureLoader,
DirectionalLight,
DoubleSide,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
PerspectiveCamera,
RepeatWrapping,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
var camera, scene, renderer;
var cameraControls;
......@@ -49,8 +53,8 @@
var teapot, textureCube;
// allocate these just once
var diffuseColor = new THREE.Color();
var specularColor = new THREE.Color();
var diffuseColor = new Color();
var specularColor = new Color();
init();
render();
......@@ -64,17 +68,17 @@
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( - 600, 550, 1300 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
ambientLight = new AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light = new DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( canvasWidth, canvasHeight );
renderer.gammaInput = true;
......@@ -85,12 +89,12 @@
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
cameraControls = new OrbitControls( camera, renderer.domElement );
cameraControls.addEventListener( 'change', render );
// TEXTURE MAP
var textureMap = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
var textureMap = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
textureMap.wrapS = textureMap.wrapT = RepeatWrapping;
textureMap.anisotropy = 16;
// REFLECTION MAP
......@@ -101,27 +105,27 @@
path + "pz.jpg", path + "nz.jpg"
];
textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube = new CubeTextureLoader().load( urls );
// MATERIALS
var materialColor = new THREE.Color();
var materialColor = new Color();
materialColor.setRGB( 1.0, 1.0, 1.0 );
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
wireMaterial = new MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
flatMaterial = new MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: DoubleSide } );
gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );
gouraudMaterial = new MeshLambertMaterial( { color: materialColor, side: DoubleSide } );
phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );
phongMaterial = new MeshPhongMaterial( { color: materialColor, side: DoubleSide } );
texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
texturedMaterial = new MeshPhongMaterial( { color: materialColor, map: textureMap, side: DoubleSide } );
reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
reflectiveMaterial = new MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: DoubleSide } );
// scene itself
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xAAAAAA );
scene = new Scene();
scene.background = new Color( 0xAAAAAA );
scene.add( ambientLight );
scene.add( light );
......@@ -181,7 +185,7 @@
var h;
var gui = new dat.GUI();
var gui = new GUI();
// material (attributes)
......@@ -315,7 +319,7 @@
}
var teapotGeometry = new THREE.TeapotBufferGeometry( teapotSize,
var teapotGeometry = new TeapotBufferGeometry( teapotSize,
tess,
effectController.bottom,
effectController.lid,
......@@ -323,7 +327,7 @@
effectController.fitLid,
! effectController.nonblinn );
teapot = new THREE.Mesh(
teapot = new Mesh(
teapotGeometry,
shading === "wireframe" ? wireMaterial : (
shading === "flat" ? flatMaterial : (
......
examples/webgl_geometry_terrain.html
浏览文件 @ 7ecfa2f9
......@@ -20,21 +20,25 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/math/ImprovedNoise.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
CanvasTexture,
ClampToEdgeWrapping,
Clock,
Color,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
var container, stats;
......@@ -45,7 +49,7 @@
var worldWidth = 256, worldDepth = 256,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
......@@ -54,12 +58,12 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xbfd1e5 );
scene = new Scene();
scene.background = new Color( 0xbfd1e5 );
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.movementSpeed = 1000;
controls.lookSpeed = 0.1;
......@@ -67,7 +71,7 @@
camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
var geometry = new PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
geometry.rotateX( - Math.PI / 2 );
var vertices = geometry.attributes.position.array;
......@@ -78,14 +82,14 @@
}
texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture = new CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
texture.wrapS = ClampToEdgeWrapping;
texture.wrapT = ClampToEdgeWrapping;
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
mesh = new Mesh( geometry, new MeshBasicMaterial( { map: texture } ) );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -113,7 +117,7 @@
function generateHeight( width, height ) {
var size = width * height, data = new Uint8Array( size ),
perlin = new THREE.ImprovedNoise(), quality = 1, z = Math.random() * 100;
perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
for ( var j = 0; j < 4; j ++ ) {
......@@ -136,9 +140,9 @@
var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
vector3 = new THREE.Vector3( 0, 0, 0 );
vector3 = new Vector3( 0, 0, 0 );
sun = new THREE.Vector3( 1, 1, 1 );
sun = new Vector3( 1, 1, 1 );
sun.normalize();
canvas = document.createElement( 'canvas' );
......
examples/webgl_geometry_terrain_fog.html
浏览文件 @ 7ecfa2f9
......@@ -20,20 +20,26 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
<script src="../build/three.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/math/ImprovedNoise.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
CanvasTexture,
ClampToEdgeWrapping,
Clock,
Color,
FogExp2,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
var container, stats;
......@@ -45,7 +51,7 @@
var worldHalfWidth = worldWidth / 2;
var worldHalfDepth = worldDepth / 2;
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
......@@ -54,21 +60,21 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
controls = new THREE.FirstPersonControls( camera );
controls = new FirstPersonControls( camera );
controls.movementSpeed = 150;
controls.lookSpeed = 0.1;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xefd1b5 );
scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
scene = new Scene();
scene.background = new Color( 0xefd1b5 );
scene.fog = new FogExp2( 0xefd1b5, 0.0025 );
var data = generateHeight( worldWidth, worldDepth );
camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
var geometry = new PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
geometry.rotateX( - Math.PI / 2 );
var vertices = geometry.attributes.position.array;
......@@ -79,14 +85,14 @@
}
texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture = new CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
texture.wrapS = ClampToEdgeWrapping;
texture.wrapT = ClampToEdgeWrapping;
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
mesh = new Mesh( geometry, new MeshBasicMaterial( { map: texture } ) );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -115,7 +121,7 @@
function generateHeight( width, height ) {
var size = width * height, data = new Uint8Array( size ),
perlin = new THREE.ImprovedNoise(), quality = 1, z = Math.random() * 100;
perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
for ( var j = 0; j < 4; j ++ ) {
......@@ -138,9 +144,9 @@
var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
vector3 = new THREE.Vector3( 0, 0, 0 );
vector3 = new Vector3( 0, 0, 0 );
sun = new THREE.Vector3( 1, 1, 1 );
sun = new Vector3( 1, 1, 1 );
sun.normalize();
canvas = document.createElement( 'canvas' );
......
examples/webgl_geometry_text.html
浏览文件 @ 7ecfa2f9
此差异已折叠。
examples/webgl_gpgpu_birds.html
浏览文件 @ 7ecfa2f9
此差异已折叠。
examples/webgl_gpgpu_water.html
浏览文件 @ 7ecfa2f9
此差异已折叠。
examples/webgl_helpers.html
浏览文件 @ 7ecfa2f9
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或