提交 9bbe5780 编写于 作者: M Mr.doob

Merged grid helper example into helpers example.

上级 025ae3ed
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - grid helper</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
margin: 0px;
overflow: hidden;
width: 100%;
height: 100%;
}
#container {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - grid helper</div>
<script src="../build/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
init();
animate();
var controls, camera, scene, renderer;
var gh;
function init() {
container = document.getElementById( "container" );
camera = new THREE.PerspectiveCamera( 60, 640 / 480.0, 1, 10000 );
camera.position.set( 150, 150, 150 );
scene = new THREE.Scene();
gh = new THREE.GridHelper( 100, 10 );
scene.add( gh );
controls = new THREE.TrackballControls( camera );
renderer = new THREE.WebGLRenderer();
renderer.setSize( 640, 480 );
container.appendChild( renderer.domElement );
}
function time() {
return Date.now() * 0.001;
}
function randomColor() {
return Math.floor(Math.random() * 0xFFFFFF) + 1;
}
var lastChangeTime = time()
function animate() {
var t = time();
if (t - lastChangeTime > 5.0) {
gh.setColors( randomColor(), randomColor() );
lastChangeTime = t;
}
render();
requestAnimationFrame( animate );
}
function render() {
controls.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
......@@ -17,8 +17,8 @@
<script>
var camera, scene, renderer;
var mesh, faceNormalsHelper, vertexNormalsHelper;
var scene, renderer;
var camera, light;
init();
animate();
......@@ -36,26 +36,28 @@
scene = new THREE.Scene();
var light = new THREE.PointLight();
light = new THREE.PointLight();
light.position.set( 200, 100, 150 );
scene.add( light );
scene.add( new THREE.PointLightHelper( light, 5 ) );
var helper = new THREE.GridHelper( 200, 10 );
helper.setColors( 0x0000ff, 0x808080 );
helper.position.y = - 150;
scene.add( helper );
var loader = new THREE.JSONLoader();
loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function ( geometry, materials ) {
var material = new THREE.MeshLambertMaterial();
mesh = new THREE.Mesh( geometry, material );
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.multiplyScalar( 50 );
scene.add( mesh );
faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
scene.add( faceNormalsHelper );
vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
scene.add( vertexNormalsHelper );
scene.add( new THREE.FaceNormalsHelper( mesh, 10 ) );
scene.add( new THREE.VertexNormalsHelper( mesh, 10 ) );
var helper = new THREE.WireframeHelper( mesh );
helper.material.depthTest = false;
......@@ -86,14 +88,15 @@
requestAnimationFrame( animate );
if ( mesh !== undefined ) {
mesh.rotation.y += 0.01;
var time = - performance.now() * 0.0003;
faceNormalsHelper.update();
vertexNormalsHelper.update();
camera.position.x = 400 * Math.cos( time );
camera.position.z = 400 * Math.sin( time );
camera.lookAt( scene.position );
}
light.position.x = Math.sin( time * 1.7 ) * 300;
light.position.y = Math.cos( time * 1.5 ) * 400;
light.position.z = Math.cos( time * 1.3 ) * 300;
renderer.render( scene, camera );
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册