Webgl learning log (3) - texture, rotation, movement

Put the code first.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="js/three.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/Tween.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        function initTween() {
            new TWEEN.Tween(mesh.position)
                    .to({ x: -400 }, 3000).repeat(Infinity).start();
        }

        was renderer;
        var stats;
        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 = 600;
            camera.position.y = 0;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt(0,0,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;
        var mesh2;
        var mesh3;
        function initObject() {
            var geometry = new THREE.CubeGeometry(100, 100, 100);          
            var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/a.jpg') });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position = new THREE.Vector3(0, 0, 0);            
            scene.add(mesh);

            var geometry2 = new THREE.CubeGeometry(100, 100, 100);
            var material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/a.jpg') });
            mesh2 = new THREE.Mesh(geometry2, material2);
            mesh2.position.set(200, 0, 0);
            scene.add(mesh2);

            var geometry3 = new THREE.CubeGeometry(200, 100, 50, 4, 4);
            var material3 = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            var mesh3 = new THREE.Mesh(geometry3, material3);
            mesh3.position.set(0, -150, 0);
            scene.add(mesh3);
        }        

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();
            //initTween();

        }
        function animation() {           
            mesh.rotation.x += 0.1;
            mesh.rotation.y += 0.1;
            mesh2.position.x += 10;            
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
            stats.update();
            //TWEEN.update();
        }

    </script>
</head>

<body onload="threeStart();">
    <div id="canvas-frame"></div>
</body>
</html>

It is not much different from the content of the previous log, and the animation part is commented out.

The texture here mainly uses the api of THREE.MeshPhongMaterial().

THREE.MeshLambertMaterial() is the api.

Then there are many ways to rotate and move. Here, you can rotate and move through properties, or you can rotate and move through methods. Borrow someone's picture here, it's really detailed. The above code is to modify the position by modifying the property value. It stands to reason that the method here is problematic. API modification through these two methods is definitely not safe. I don’t know if these APIs will be modified later.

But the above is just the beginning. If you only understand the above knowledge and don't understand the essence, it will definitely be difficult to go later. In fact, this movement and rotation is more of a matrix operation.

Webgl learning log (3) - texture, rotation, movement

Guess you like