Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 c02ab354 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #13852 from Mugen87/dev4 

Examples: Clean up
上级 fb46a77f 55cf4180
隐藏空白更改
内联 并排
Showing with 96 addition and 107 deletion
examples/webgl_geometry_cube.html
浏览文件 @ c02ab354
......@@ -39,7 +39,7 @@
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/webgl_geometry_dynamic.html
浏览文件 @ c02ab354
......@@ -37,7 +37,6 @@
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
<script src="../build/three.js"></script>
......@@ -49,34 +48,25 @@
<script>
if ( ! Detector.webgl ) {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
var camera, controls, scene, renderer, stats;
}
var container, stats;
var camera, controls, scene, renderer;
var mesh, texture, geometry, material;
var mesh, texture, geometry, material, clock;
var worldWidth = 128, worldDepth = 128,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = 200;
clock = new THREE.Clock();
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 500;
......@@ -86,16 +76,20 @@
scene.background = new THREE.Color( 0xaaccff );
scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
geometry.rotateX( - Math.PI / 2 );
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
var position = geometry.attributes.position;
position.dynamic = true;
for ( var i = 0; i < position.count; i ++ ) {
geometry.vertices[ i ].y = 35 * Math.sin( i / 2 );
var y = 35 * Math.sin( i / 2 );
position.setY( i, y );
}
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 5, 5 );
......@@ -104,16 +98,13 @@
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.innerHTML = "";
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
//
......@@ -145,16 +136,19 @@
function render() {
var delta = clock.getDelta(),
time = clock.getElapsedTime() * 10;
var delta = clock.getDelta();
var time = clock.getElapsedTime() * 10;
var position = geometry.attributes.position;
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
for ( var i = 0; i < position.count; i ++ ) {
geometry.vertices[ i ].y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
var y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
position.setY( i, y );
}
mesh.geometry.verticesNeedUpdate = true;
position.needsUpdate = true;
controls.update( delta );
renderer.render( scene, camera );
......
examples/webgl_geometry_hierarchy.html
浏览文件 @ c02ab354
......@@ -21,9 +21,7 @@
<script>
var container, stats;
var camera, scene, renderer;
var camera, scene, renderer, stats;
var geometry, group;
......@@ -32,16 +30,11 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
......@@ -49,7 +42,7 @@
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
group = new THREE.Group();
......@@ -73,18 +66,25 @@
scene.add( group );
renderer = new THREE.WebGLRenderer();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
container.appendChild( renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
//
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'resize', onWindowResize, false );
}
......@@ -100,7 +100,7 @@
}
function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
......@@ -126,8 +126,8 @@
ry = Math.sin( time * 0.3 ) * 0.5,
rz = Math.sin( time * 0.2 ) * 0.5;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
......
examples/webgl_geometry_hierarchy2.html
浏览文件 @ c02ab354
......@@ -21,9 +21,7 @@
<script>
var container, stats;
var camera, scene, renderer;
var camera, scene, renderer, stats;
var geometry, root;
......@@ -32,23 +30,18 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
root = new THREE.Mesh( geometry, material );
......@@ -127,13 +120,21 @@
}
renderer = new THREE.WebGLRenderer();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
......@@ -153,7 +154,7 @@
}
function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
......@@ -179,8 +180,8 @@
var ry = Math.sin( time * 0.3 ) * 0.1;
var rz = Math.sin( time * 0.2 ) * 0.1;
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
......
examples/webgl_geometry_normals.html
浏览文件 @ c02ab354
......@@ -33,10 +33,6 @@
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
<p>
<span>Yellow Arrows: Face Normals</span><br>
<span>Red Arrows: Vertex Normals</span>
</p>
</div>
<script src="../build/three.js"></script>
......@@ -51,18 +47,16 @@
var mesh, geometry;
var geometries = [
{ type: 'BoxGeometry', geometry: new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ) },
{ type: 'CircleGeometry', geometry: new THREE.CircleGeometry( 200, 32 ) },
{ type: 'CylinderGeometry', geometry: new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ) } ,
{ type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronGeometry( 100, 1 ) },
{ type: 'OctahedronGeometry', geometry: new THREE.OctahedronGeometry( 200, 0 ) },
{ type: 'PlaneGeometry', geometry: new THREE.PlaneGeometry( 200, 200, 4, 4 ) },
{ type: 'RingGeometry', geometry: new THREE.RingGeometry( 32, 64, 16 ) },
{ type: 'SphereGeometry', geometry: new THREE.SphereGeometry( 100, 12, 12 ) },
{ type: 'TorusGeometry', geometry: new THREE.TorusGeometry( 64, 16, 12, 12 ) },
{ type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotGeometry( 64, 16 ) }
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 )
];
var options = {
......@@ -83,7 +77,7 @@
}
geometry = geometries[ options.Geometry ].geometry;
geometry = geometries[ options.Geometry ];
// scale geometry to a uniform size
......@@ -95,9 +89,6 @@
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
mesh.add( faceNormalsHelper );
var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
mesh.add( vertexNormalsHelper );
......@@ -129,16 +120,16 @@
//
var geometries = {
BoxGeometry: 0,
CircleGeometry: 1,
CylinderGeometry: 2,
IcosahedronGeometry: 3,
OctahedronGeometry: 4,
PlaneGeometry: 5,
RingGeometry: 6,
SphereGeometry: 7,
TorusGeometry: 8,
TorusKnotGeometry: 9
BoxBufferGeometry: 0,
CircleBufferGeometry: 1,
CylinderBufferGeometry: 2,
IcosahedronBufferGeometry: 3,
OctahedronBufferGeometry: 4,
PlaneBufferGeometry: 5,
RingBufferGeometry: 6,
SphereBufferGeometry: 7,
TorusBufferGeometry: 8,
TorusKnotBufferGeometry: 9
};
gui = new dat.GUI( { width: 350 } );
......
examples/webgl_lights_physical.html
浏览文件 @ c02ab354
......@@ -111,7 +111,7 @@
scene = new THREE.Scene();
var bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
bulbMat = new THREE.MeshStandardMaterial( {
......@@ -204,14 +204,14 @@
floorMesh.rotation.x = -Math.PI / 2.0;
scene.add( floorMesh );
var ballGeometry = new THREE.SphereGeometry( 0.5, 32, 32 );
var ballGeometry = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
ballMesh.position.set( 1, 0.5, 1 );
ballMesh.rotation.y = Math.PI;
ballMesh.castShadow = true;
scene.add( ballMesh );
var boxGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
boxMesh.position.set( -0.5, 0.25, -1 );
boxMesh.castShadow = true;
......
examples/webgl_lights_pointlights.html
浏览文件 @ c02ab354
......@@ -54,15 +54,13 @@
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
//model
var loader = new THREE.OBJLoader();
loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
......@@ -73,9 +71,10 @@
} );
var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
//lights
light1 = new THREE.PointLight( 0xff0040, 2, 50 );
light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
scene.add( light1 );
......@@ -93,14 +92,16 @@
scene.add( light4 );
//renderer
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
//stats
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
......
examples/webgl_lights_spotlight.html
浏览文件 @ c02ab354
......@@ -104,16 +104,17 @@
var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
var geometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, - 1, 0 );
mesh.rotation.x = - Math.PI * 0.5;
mesh.receiveShadow = true;
scene.add( mesh );
var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
var geometry = new THREE.BoxGeometry( 3, 1, 2 );
var geometry = new THREE.BoxBufferGeometry( 3, 1, 2 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 40, 2, 0 );
......
examples/webgl_lights_spotlights.html
浏览文件 @ c02ab354
......@@ -61,10 +61,11 @@
var matFloor = new THREE.MeshPhongMaterial();
var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
var geoFloor = new THREE.PlaneBufferGeometry( 2000, 2000 );
var geoBox = new THREE.BoxBufferGeometry( 3, 1, 2 );
var mshFloor = new THREE.Mesh( geoFloor, matFloor );
mshFloor.rotation.x = - Math.PI * 0.5;
var mshBox = new THREE.Mesh( geoBox, matBox );
var ambient = new THREE.AmbientLight( 0x111111 );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或