master

分支 (1)

管理

管理

master

threejsaudioContext
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js + AudioContext</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 {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        a {
            color:#0078ff;
        }
        #music-bt{
            margin: 0;
        }
        #music-bt li{
            position: fixed;
            width: 2px;
            height: 250px;
            list-style: none;
        }
        #music-bt li div{
            position: absolute;
            border-radius: 50%;
            cursor: pointer;
        }
        #music-bt li:nth-child(1){
            left: calc(50% - 300px);
            background: #0078ff;
            height: 200px;
        }
        #music-bt li:nth-child(2){
            left: calc(50% - 100px);
            background: #FFA169;
            height: 300px;
        }
        #music-bt li:nth-child(3){
            left: calc(50% + 100px);
            background: #6BFFFF;
            height: 270px;
        }
        #music-bt li:nth-child(4){
            left: calc(50% + 300px);
            background: #9C21FF;
            height: 330px;
        }

        #music-bt li:nth-child(1) div{
            width: 100px;
            height: 100px;
            left: -49px;
            top: 150px;
            background: #0078ff;
        }
        #music-bt li:nth-child(2) div{
            width: 80px;
            height: 80px;
            left: -39px;
            top: 260px;
            background: #FFA169;
        }
        #music-bt li:nth-child(3) div{
            width: 90px;
            height: 90px;
            left: -44px;
            top: 225px;
            background: #6BFFFF;
        }
        #music-bt li:nth-child(4) div{
            width: 70px;
            height: 70px;
            left: -34px;
            top: 295px;
            background: #9C21FF;
        }


    </style>
</head>
<body>

<ul id="music-bt">
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

<script src="js/three.js"></script>
<script src="js/render.js"></script>


<script>


    var container, stats;
    var camera, scene, renderer;


    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    var lights = [];
    var numLights = 4;
    var clock,mixer;

    var zhuzi=[];
    var maozi=[];

    init();
    animate();

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 2000;
        camera.position.y = -4000;

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer({
            antialias:true
        });

        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.shadowMapEnabled = true;
        container.appendChild( renderer.domElement );

        clock=new THREE.Clock();

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        document.addEventListener( 'touchmove', onDocumentTouchMove, false );
        window.addEventListener( 'resize', onWindowResize, false );


        var geometry = new THREE.BoxGeometry( 300, 20, 300 );
        for ( var i = 0; i < 7; i ++ ) {
//;new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff, specular: 0x222222, shininess: 75 } )
            var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff, specular: 0x222222, shininess: 75 } ));
            object.position.x = i*600 - 1800;
            object.position.y = -2990;
            object.position.z = -2000;
			object.castShadow = true;
			object.receiveShadow = true;

            scene.add( object );
            zhuzi.push( object );
        }

        for( var i = 0; i < 7; i ++ ){
            var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x222222, shininess: 75 } ));
            object.position.x = i*600 - 1800;
            object.position.y = -2980;
            object.position.z = -2000;
			object.castShadow = true;
			object.receiveShadow = true;

            scene.add( object );

            maozi.push( object );
        }

        initLights();
        function initLights() {

            var distance = 3000;

            var c = new THREE.Vector3();
            var geometry = new THREE.SphereGeometry( 20, 20, 20 );

            for ( var i = 0; i < numLights; i ++ ) {

                var light = new THREE.PointLight( 0xffffff, 1, 0 );
				light.distance=0;
				light.intensity=1;
                c.set( Math.random(), Math.random(), Math.random() ).normalize();
                light.color.setRGB( c.x, c.y, c.z );


				light.shadow.camera.near = 1;
				light.shadow.camera.far = 4000;
				// pointLight.shadowCameraVisible = true;
				light.shadow.bias = 0.01;
					//light.castShadow = true;

                scene.add( light );
                lights.push( light );

				//light.castShadow = true;

                var material = new THREE.MeshBasicMaterial( { color: light.color } );
                var emitter = new THREE.Mesh( geometry, material );
                light.add( emitter );

				var pointColor = "white";


            }

			var light = new THREE.AmbientLight(0x666666);
			scene.add(light);

            var spotLight = new THREE.SpotLight( 0x666666 );
            spotLight.position.set( 0, -6250, 0 );
			spotLight.castShadow = true;
            scene.add( spotLight );

			var directionalLight = new THREE.DirectionalLight(0x999999,1);
				directionalLight.position.set(0,1000,3000);
				directionalLight.castShadow = true;
				directionalLight.shadowCameraNear =6;
        directionalLight.shadowCameraFar =8000;
        directionalLight.shadowCameraLeft =-5000;
        //directionalLight.shadowCameraLeft = 10;
       directionalLight.shadowCameraRight =5000;
       directionalLight.shadowCameraTop =5000;
       directionalLight.shadowCameraBottom =-5000;
				directionalLight.shadowCameraVisible=true;
				//directionalLight.distance = 5;
				var target = new THREE.Object3D();
            target.position = new THREE.Vector3(0, -3000, 0);
            directionalLight.target = target;
			directionalLight.shadowCameraVisible =
true;

				directionalLight.intensity = 0.5;
				//directionalLight.shadowMapHeight = 1024;
				//directionalLight.shadowMapWidth = 1024;


				scene.add(directionalLight);

        }

        initRoom();
        function initRoom() {

            var size = 6000;
            var geometry = new THREE.PlaneBufferGeometry( size, size );
            var material = new THREE.MeshPhongMaterial( { color: 0x222222, specular: 0x222222, shininess: 75 } );
            var transparentMaterial = new THREE.MeshPhongMaterial( { color: 0x222222, emissive: 0x88888888, specular: 0x222222, shininess: 75, opacity: 0.3, transparent: true } );

            var room = new THREE.Object3D();

            // top
            var mesh = new THREE.Mesh( geometry, material );
            mesh.rotation.x = Math.PI/2;
            mesh.position.y = size / 2;
			mesh.receiveShadow = true;
            room.add( mesh );

            // bottom
            mesh = new THREE.Mesh( geometry, material );
            mesh.rotation.x = -Math.PI/2;
            mesh.position.y = -size / 2;
			mesh.receiveShadow = true;
            room.add( mesh );

            // left
            mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = -size / 2;
            mesh.rotation.y = Math.PI/2;
			mesh.receiveShadow = true;
            room.add( mesh );

            // right
            mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = size / 2;
            mesh.rotation.y = -Math.PI/2;
			mesh.receiveShadow = true;
            room.add( mesh );

            // back
            mesh = new THREE.Mesh( geometry, material );
            mesh.position.z = -size / 2;
			mesh.receiveShadow = true;
            room.add( mesh );

            // front, to check if transparency works
            mesh = new THREE.Mesh( geometry, transparentMaterial );
            mesh.position.z = size / 2;
            mesh.scale.multiplyScalar( 0.33 );
			mesh.receiveShadow = true;
            mesh.visible = false;

            room.add( mesh );

            // back2, to check if transparency works
            mesh = new THREE.Mesh( geometry, transparentMaterial );
            mesh.position.z = -size / 4;
            mesh.scale.multiplyScalar( 0.75 );
            mesh.visible = false;
			mesh.receiveShadow = true;
            room.add( mesh );

			room.receiveShadow = true;

            scene.add( room );

        }

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    //

    function onDocumentMouseMove( event ) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;

    }

    function onDocumentTouchStart( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

    function onDocumentTouchMove( event ) {

        if ( event.touches.length === 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();

        update();

    }

    function update(){
        var time = Date.now() * 0.0005;

        for ( var i = 0, il = lights.length; i < il; i ++ ) {

            var light = lights[ i ];
            var x = Math.sin( time + i * 7.0 ) * 3000;
            var y = Math.cos( time + i * 5.0 ) * 3000;
            var z = Math.cos( time + i * 3.0 ) * 3000;
            light.position.set( x, y, z );

        }
    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;
        camera.lookAt( scene.position );

        renderer.render( scene, camera );

    }

</script>
</body>
</html>