three.js从入门到精通系列教程020 - three.js通过贴图使用图像材质创建立方体

最新推荐文章于 2024-04-30 16:57:21 发布

smartsmile2012

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量370

点赞数 8

分类专栏： three.js从入门到精通系列教程文章标签： javascript 贴图材质 three.js 数字孪生

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135714838

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程020 - three.js通过贴图使用图像材质创建立方体</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器，antialias表示是否启用抗锯齿
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor("white", 1);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 1, 1400);
        myCamera.position.set(0, 0, 3.5);

        /*
            平行光DirectionalLight( color : Integer, intensity : Float )
            color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
            intensity - (可选参数) 光照的强度。缺省值为1。
        */
        var myLight = new THREE.DirectionalLight(0xffffff, 1.5);
        myLight.position.set(0, 0, 1);
        myScene.add(myLight);
        //创建纹理图像(贴图)
        var myMap = THREE.ImageUtils.loadTexture("images/img001.jpg");
        //根据纹理图像(贴图)创建材质
        var myMaterial = new THREE.MeshPhongMaterial({ map: myMap });
        //使用图像材质创建立方体
        var myGeometry = new THREE.CubeGeometry(1, 1, 1);
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myScene.add(myMesh);
        //渲染(旋转)立方体
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            myMesh.rotation.x += 0.02;
            myMesh.rotation.y += 0.02;
            requestAnimationFrame(animate);
        }
    </script>
</body>

</html>