飞翔的小鸟

• 示例
• HTML
• CSS
• JS

示例

HTML

<script src="http://threejs.org/build/three.min.js">script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js">script><div id="world">div>

CSS

html {background: #000;
}

JS

var birdPalette = {beak: 0xDE8C1E,body: 0xFF00FF, wings: 0xFFFFFF,eyes: 0x000000,
};var scene,camera, fieldOfView, aspectRatio, nearPlane, farPlane,renderer, container;var WIDTH, HEIGHT;var pointLight,hemisphereLight,ambientLight;var mousePos = {x: 0, y: 0};///
//        Lights         //
///
function addLights() {/*pointLight = new THREE.PointLight(0xFFffff);pointLight.position.set(-3, 0, 0);pointLight.castShadow = true;scene.add(pointLight);*/hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9);scene.add(hemisphereLight);ambientLight = new THREE.AmbientLight(0xffffff, .5);scene.add(ambientLight);
}///
//        Objects        //
///
var Bird = function() {this.mesh = new THREE.Object3D();this.wingContainerR = new THREE.Object3D();this.wingContainerL = new THREE.Object3D();this.mesh.name = "bird";var gHead = new THREE.SphereGeometry(0.5, 16, 16);var mHead = new THREE.MeshLambertMaterial({color: birdPalette.body,});var head = new THREE.Mesh(gHead, mHead);head.castShadow = true;head.receiveShadow = true;this.mesh.add(head);var eye_l = new THREE.Mesh(new THREE.SphereGeometry(0.05, 8, 8),new THREE.MeshLambertMaterial({ color: birdPalette.eyes }),);eye_l.position.set(-0.45, 0.2, 0.15);this.mesh.add(eye_l);var eye_r = eye_l.clone();eye_r.position.z *= -1;this.mesh.add(eye_r);var gBeak = new THREE.ConeGeometry(0.2, 0.5, 4, 4);var mBeak = new THREE.MeshPhongMaterial({color: birdPalette.beak,shininess: 500,});var beak = new THREE.Mesh(gBeak, mBeak);beak.rotation.set(0, 0, Math.PI/2);beak.position.set(-0.7, 0, 0);beak.castShadow = true;beak.receiveShadow = true;this.mesh.add(beak);var gBody = new THREE.CylinderGeometry(0.5, 1, 1.5, 32, 32);var mBody = new THREE.MeshLambertMaterial({color: birdPalette.body,});var body = new THREE.Mesh(gBody, mBody);body.rotation.set(0, 0, Math.PI/2);body.position.set(0.75, 0, 0);body.castShadow = true;body.receiveShadow = true;this.mesh.add(body);var gWingR = new THREE.BoxGeometry(0.7, 0.1, 1.5, 1, 1, 1);var mWingR = new THREE.MeshPhongMaterial({color: birdPalette.wings, });var wingR = new THREE.Mesh(gWingR, mWingR);wingR.rotation.set(0, -0.5, 0);wingR.position.set(0.75, 0, -0.8);wingR.castShadow = true;wingR.receiveShadow = true;this.wingContainerR.add(wingR);this.mesh.add(this.wingContainerR);var gWingL = new THREE.BoxGeometry(0.7, 0.1, 1.5, 1, 1, 1);var mWingL = new THREE.MeshPhongMaterial({color: birdPalette.wings, });var wingL = new THREE.Mesh(gWingL, mWingL);wingL.rotation.set(0, 0.5, 0);wingL.position.set(0.75, 0, 0.8);wingL.castShadow = true;wingL.receiveShadow = true;this.wingContainerL.add(wingL);this.mesh.add(this.wingContainerL);};Bird.prototype.fly = function() {var wingr = this.wingContainerR;var wingl = this.wingContainerL;wingr.rotation.x = Math.sin(Date.now()/240) * 0.5;wingl.rotation.x = Math.sin(-Date.now()/240) * 0.5;
}function createBird() {bird = new Bird();//bird.mesh.scale.set(0.25, 0.25, 0.25);//bird.mesh.rotation.y = Math.PI;bird.mesh.position.y = 0;scene.add(bird.mesh);
}///
//       Functions       //
///function createScene() {HEIGHT = window.innerHeight;WIDTH = window.innerWidth;scene = new THREE.Scene();aspectRatio = WIDTH / HEIGHT;fieldOfView = 75;nearPlane = 0.1;farPlane = 200;/////        Camera         /////camera = new THREE.PerspectiveCamera(fieldOfView,aspectRatio,nearPlane,farPlane);camera.position.set(-3, 1, 2);camera.lookAt( scene.position );/////       Controls        /////var	controls = new THREE.OrbitControls( camera );controls.update();renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });renderer.setSize(WIDTH, HEIGHT);renderer.shadowMap.enabled = true;container = document.getElementById('world');container.appendChild(renderer.domElement);var axisHelper = new THREE.AxesHelper( 1.25 );scene.add( axisHelper );window.addEventListener('resize', handleWindowResize, false);
}function loop() {requestAnimationFrame(loop);bird.fly();//controls.update();renderer.render(scene, camera);
};function init(event) {document.addEventListener('mousemove', handleMouseMove, false);createScene();addLights();//console.log("lights");createBird();//console.log("bird");loop();
}function handleWindowResize() {// update width and heightWIDTH = window.innerWidth;HEIGHT = window.innerHeight;renderer.setSize(WIDTH, HEIGHT);camera.aspect = WIDTH / HEIGHT;camera.updateProjectionMatrix();
}
function handleMouseMove(event) {var tx = -1 + (event.clientX / WIDTH)*2;var ty = 1 - (event.clientY / HEIGHT)*2;mousePos = {x:tx, y:ty};
}window.addEventListener('load', init, false);///
//       Reference       //
/*/https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/*/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！