Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 982b28f5 编写于 作者: M Mr.doob
浏览文件
操作

Docs: Improved viewer.

上级 fe99089d
隐藏空白更改
内联 并排
Showing with 64 addition and 61 deletion
docs/scenes/bones-browser.html
浏览文件 @ 982b28f5
......@@ -10,7 +10,7 @@
font-weight: normal;
font-style: normal;
}
body {
margin:0;
font-family: 'inconsolata';
......@@ -18,9 +18,9 @@
line-height: 18px;
overflow: hidden;
}
canvas { width: 100%; height: 100% }
#newWindow {
display: block;
position: absolute;
......@@ -31,13 +31,13 @@
</style>
</head>
<body>
<a id='newWindow' href='./bones-browser.html' target='_blank'>Open in New Window</a>
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script src="../../examples/js/controls/OrbitControls.js"></script>
<script>
var gui, scene, camera, renderer, orbit, ambientLight, lights, mesh, bones, skeletonHelper;
......@@ -57,6 +57,7 @@
camera.position.y = 30;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -155,9 +156,9 @@
var mesh = new THREE.SkinnedMesh( geometry, material );
var skeleton = new THREE.Skeleton( bones );
mesh.add( bones[ 0 ] );
mesh.bind( skeleton );
skeletonHelper = new THREE.SkeletonHelper( mesh );
......@@ -165,27 +166,27 @@
scene.add( skeletonHelper );
return mesh;
};
function setupDatGui () {
var folder = gui.addFolder( "General Options" );
folder.add( state, "animateBones" );
folder.__controllers[ 0 ].name( "Animate Bones" );
folder.add( mesh, "pose" );
folder.__controllers[ 1 ].name( ".pose()" );
var bones = mesh.skeleton.bones;
for ( var i = 0; i < bones.length; i ++ ) {
var bone = bones[ i ];
folder = gui.addFolder( "Bone " + i );
folder.add( bone.position, 'x', -10 + bone.position.x, 10 + bone.position.x );
folder.add( bone.position, 'y', -10 + bone.position.y, 10 + bone.position.y );
folder.add( bone.position, 'z', -10 + bone.position.z, 10 + bone.position.z );
......@@ -193,7 +194,7 @@
folder.add( bone.rotation, 'x', -Math.PI * 0.5, Math.PI * 0.5 );
folder.add( bone.rotation, 'y', -Math.PI * 0.5, Math.PI * 0.5 );
folder.add( bone.rotation, 'z', -Math.PI * 0.5, Math.PI * 0.5 );
folder.add( bone.scale, 'x', 0, 2 );
folder.add( bone.scale, 'y', 0, 2 );
folder.add( bone.scale, 'z', 0, 2 );
......@@ -201,21 +202,21 @@
folder.__controllers[ 0 ].name( "position.x" );
folder.__controllers[ 1 ].name( "position.y" );
folder.__controllers[ 2 ].name( "position.z" );
folder.__controllers[ 3 ].name( "rotation.x" );
folder.__controllers[ 4 ].name( "rotation.y" );
folder.__controllers[ 5 ].name( "rotation.z" );
folder.__controllers[ 6 ].name( "scale.x" );
folder.__controllers[ 7 ].name( "scale.y" );
folder.__controllers[ 8 ].name( "scale.z" );
}
}
function initBones () {
var segmentHeight = 8;
var segmentCount = 4;
var height = segmentHeight * segmentCount;
......@@ -238,34 +239,34 @@
};
function render () {
requestAnimationFrame( render );
var time = Date.now() * 0.001;
var bone = mesh;
//Wiggle the bones
if ( state.animateBones ) {
for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {
mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
}
}
skeletonHelper.update();
renderer.render( scene, camera );
};
initScene();
render();
</script>
</body>
</html>
\ No newline at end of file
</html>
docs/scenes/geometry-browser.html
浏览文件 @ 982b28f5
......@@ -59,7 +59,8 @@
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer({antialias: true});
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
docs/scenes/material-browser.html
浏览文件 @ 982b28f5
......@@ -10,7 +10,7 @@
font-weight: normal;
font-style: normal;
}
body {
margin:0;
font-family: 'inconsolata';
......@@ -18,9 +18,9 @@
line-height: 18px;
overflow: hidden;
}
canvas { width: 100%; height: 100% }
#newWindow {
display: block;
position: absolute;
......@@ -31,23 +31,24 @@
</style>
</head>
<body>
<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
<script src="../../build/three.min.js"></script>
<script src='../../examples/js/libs/dat.gui.min.js'></script>
<script src='js/material.js'></script>
<script>
document.getElementById('newWindow').href += window.location.hash;
var gui = new dat.GUI();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer();
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -58,7 +59,7 @@
lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[0].position.set( 0, 200, 0 );
lights[1].position.set( 100, 200, 100 );
lights[2].position.set( -100, -200, -100 );
......@@ -71,54 +72,54 @@
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var mesh = new THREE.Mesh( geometry );
generateVertexColors( geometry );
mesh.material = chooseFromHash( gui, mesh, geometry );
generateMorphTargets( mesh, geometry );
scene.add( mesh );
var prevFog = false;
var render = function () {
requestAnimationFrame( render );
var time = Date.now() * 0.001;
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
if ( prevFog !== scene.fog ) {
mesh.material.needsUpdate = true;
prevFog = scene.fog;
}
if ( mesh.morphTargetInfluences ) {
mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
}
renderer.render( scene, camera );
};
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
render();
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或