<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????html, body { ???????????margin: 0; ???????????padding: 0; ???????} ???????div#canvas-frame { ???????????border: none; ???????????cursor: pointer; ???????????width: 100%; ???????????height: 600px; ???????????background-color: #EEEEEE; ???????} ???</style></head><body><div id="canvas-frame"></div><script src="js/three.js"></script><script src="js/Stats.js"></script><script src="js/tween.min.js"></script><script> ???//定义一些需要的变量 ???var renderer, camera, scene, light, object,stats,TWEEN; ???var width, height; ???//初始化three ???function initThree(){ ???????width = document.getElementById(‘canvas-frame‘).clientWidth; ???????height=document.getElementById(‘canvas-frame‘).clientHeight; ???????renderer= new THREE.WebGLRenderer({ ???????????antialias:true ???????}); ???????renderer.setSize(width,height); ???????document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement); ???????renderer.setClearColor(0xFFFFFF, 1.0); ???????//性能监视器 ???????stats = new Stats(); ???????stats.domElement.style.position="absolute"; ???????stats.domElement.style.left="0px"; ???????stats.domElement.style.top="0px"; ???????document.getElementById(‘canvas-frame‘).appendChild(stats.domElement) ???} ???var camera; ???function initCamera() { ???????camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); ???????camera.position.x = 0; ???????camera.position.y = 0; ???????camera.position.z = 600; ???????camera.up.x = 0; ???????camera.up.y = 1; ???????camera.up.z = 0; ???????camera.lookAt({ ???????????x : 0, ???????????y : 0, ???????????z : 0 ???????}); ???} ???var scene; ???function initScene() { ???????scene = new THREE.Scene(); ???} ???var light; ???function initLight() { ???????light = new THREE.AmbientLight(0xFF0000); ???????light.position.set(100, 100, 200); ???????scene.add(light); ???????light = new THREE.PointLight(0x00FF00); ???????light.position.set(0, 0,300); ???????scene.add(light); ???} ???var cube; ???var mesh; ???function initObject() { ???????var geometry = new THREE.CylinderGeometry( 100,150,400); ???????var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); ???????mesh = new THREE.Mesh( geometry,material); ???????mesh.position = new THREE.Vector3(0,0,0); ???????scene.add(mesh); ???} ???function threeStart() { ???????initThree(); ???????initCamera(); ???????initScene(); ???????initLight(); ???????initObject(); ???????animation(); ???} ???function animation() ???{ ???????mesh.position.x-=1; ???????renderer.render(scene, camera); ???????requestAnimationFrame(animation); ???????//调用stats.update()函数来统计时间和帧数 ???????stats.update(); ???} ???window.onload = threeStart();</script></body></html>
threejs学习笔记04---物体动
原文地址：http://www.cnblogs.com/Webyangbowen/p/8058874.html