创建一个基本的threejs应用
<!DOCTYPE html>
<html lang="en">
<head>
<title>路径相机</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color:#000;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a { color: red; }
</style>
</head>
<body>
<script src=".././test/three/build/three.js"></script>
<script src="../../js/Detector.js"></script>
<script src="../../js/stats.js"></script>
<script src="../../js/Tween.js"></script>
<script src=".././test/js/OrbitControls.js"></script>
<script>
function initRenderer(){
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( (window.innerWidth) , window.innerHeight );
renderer.setClearColor(0xffffff);
document.body.appendChild( renderer.domElement );
}
function initScene(){
scene = new THREE.Scene();
}
function initCamera(){
camera = new THREE.PerspectiveCamera( 45 , (window.innerWidth)/window.innerHeight , 1.0 , 10000 );
camera.position.set( 1200 , 1200 , 1200 );
camera.up.set( 0 , 1 , 0 );
camera.lookAt({x:0,y:0,z:0});
}
function initLight(){
light1 = new THREE.AmbientLight( 0xffffff );
scene.add( light1 );
light2 = new THREE.DirectionalLight( 0x002288 );
light2.position.set( 1200, 1200, 1200 );
scene.add( light2 );
}
function initControl(){
orbitControls = new THREE.OrbitControls(camera , renderer.domElement);
}
clock = new THREE.Clock();
function render(){
TWEEN.update();
var delta = clock.getDelta();
orbitControls.update( delta );
renderer.clear();
renderer.render( scene , camera );
requestAnimationFrame( render );
}
initRenderer();
initScene();
initCamera();
initLight();
initControl();
var pos = { x:1200 , y:1200 , z:1200 };
var tween = new TWEEN.Tween(pos)
.to({
x: 800,
y: 800,
z: 800
}, 2000)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(() => {
orbitControls.object.position.set(pos.x, pos.y, pos.z);
});
var posTar = { x:0 , y:0 , z:0 };
var tween1 = new TWEEN.Tween(posTar)
.to({
x: 300,
y: 0,
z: 0
}, 2000)
.easing(TWEEN.Easing.Linear.None)
.onUpdate(() => {
console.log( posTar )
orbitControls.target.set( posTar.x , posTar.y , posTar.z );
});
tween.start();
tween1.start();
document.onmousedown = function(){
orbitControls.object.up.set( 1 , 0 , 0 );
document.onmousemove = function(){
}
}
document.onmouseup = function(){
document.onmousemove = null ;
}
function createPlane(){
var planeGeo = new THREE.PlaneGeometry( 900 , 600 );
var planeMat = new THREE.MeshLambertMaterial({ color:0x83296f , shading: THREE.FlatShading });
var plane = new THREE.Mesh( planeGeo , planeMat );
scene.add( plane );
return plane
};
function createCube(){
var cubeGeo = new THREE.CubeGeometry( 50 , 50 , 100 );
var cubeMat = new THREE.MeshLambertMaterial({color:0x6856d6});
var cube = new THREE.Mesh( cubeGeo , cubeMat );
scene.add( cube );
return cube ;
};
var plane1 = createPlane();
plane1.rotation.x = -90*Math.PI/180;
for( var i=0 ; i< 8 ; i++ ){
var cube1 = createCube();
cube1.translateX( -400 + i*120 );
}
render();
</script>
</body>
</html>
鼠标拾取
var mouse3D = new THREE.Vector3(
( (event.clientX) / (window.innerWidth) ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5
);
mouse3D.unproject(that.camera);
mouse3D.sub(that.camera.position);
mouse3D.normalize();
var raycaster = new THREE.Raycaster(that.camera.position, mouse3D);
var intersects = raycaster.intersectObjects( that.elements );
if ( intersects.length > 0 ) {
that.selectItemInfo.oldItem = that.selectItemInfo.nowItem ;
if(that.selectItemInfo.oldItem){
that.selectItemInfo.oldItem.material.color = that.selectItemInfo.oldColor ;
that.selectItemInfo.oldItem.material.transparent = true;
that.selectItemInfo.oldItem.material.opacity = 0.4; ;
} ;
that.selectItemInfo.nowItem = intersects[0].object
that.selectItemInfo.oldColor = intersects[0].object.material.color ;
intersects[ 0 ].object.material = new THREE.MeshLambertMaterial({
color: 'rgb(56,182,255)',
});
};