three.js从入门到精通系列教程037 - 采用混合材质制作圆环节

最新推荐文章于 2024-05-30 17:57:45 发布

smartsmile2012

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量402

点赞数 11

分类专栏： three.js从入门到精通系列教程文章标签： javascript 材质开发语言 three.js 数字孪生前端

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

版权

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

52 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程037 - 采用混合材质制作圆环节</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/SceneUtils.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.near = 30;
        myCamera.far = 50;
        myCamera.updateProjectionMatrix();
        myCamera.position.set(-20, 8.4, 37.6);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));
        //创建圆环结
        var myGeometry = new THREE.TorusKnotGeometry(8, 3, 500, 60, 2, 7);
        //创建深度材质
        var myMeshDepthMaterial = new THREE.MeshDepthMaterial();
        //创建绿色材质
        var myMeshBasicMaterial = new THREE.MeshBasicMaterial({
            color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending
        });
        //混合两种材质
        var myMesh = new THREE.SceneUtils.createMultiMaterialObject(
            myGeometry, [myMeshDepthMaterial, myMeshBasicMaterial]);
        myScene.add(myMesh);
        //渲染圆环结
        myRenderer.render(myScene, myCamera);
    </script>
</body>

</html>