three.js从入门到精通系列教程046 - 在平面上创建一个可变大小和长短的圆柱体

原创

于 2024-01-23 08:46:18 发布 · 548 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #three.js #3D #数字孪生

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程046 - 在平面上创建一个可变大小和长短的圆柱体</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.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);
        myRenderer.shadowMap.enabled = true;
        myRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.set(0, 40, 50);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));
        var myScene