three.js从入门到精通系列教程049 - 加载房屋模型，可旋转可缩放

发布时间：2024年01月23日
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程049 - 加载房屋模型，可旋转可缩放</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/LegacyJSONLoader.js"></script>
    <script src="ThreeJS/OrbitControls.js"></script>
</head>

<body>
    <p><button id="myButton1">加载房子模型</button>
        <button id="myButton2">移除房子模型</button>
    </p>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setPixelRatio(window.devicePixelRatio);
        myRenderer.setClearColor('white', 1);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 5000);
        myCamera.position.set(-20, 40, 50);
        var mySpotLight = new THREE.SpotLight(0xffffff);
        mySpotLight.position.set(0, 200, 300);
        myScene.add(mySpotLight);
        myScene.add(new THREE.AmbientLight(0xffffff, 0.2));
        //渲染在场景中的房子模型
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
        //响应单击“加载房子模型”按钮
        $("#myButton1").click(function () {
            var myLegacyJSONLoader = new LegacyJSONLoader();
            //加载房子模型
            myLegacyJSONLoader.load('Data/MyHouse.json', function (geo, material) {
                //根据该模型的几何体和材质初始化Mesh
                var myHouse = new THREE.Mesh(geo, material);
                myHouse.position.set(0, -6, 15);
                myHouse.name = 'myHouse';
                myScene.add(myHouse);
            });
        });
        //响应单击“移除房子模型”按钮
        $("#myButton2").click(function () {
            myScene.remove(myScene.getObjectByName('myHouse'));
        });
        //创建轨道控制器
        var myOrbitControls = new THREE.OrbitControls(myCamera);
    </script>
</body>

</html>

文章来源:https://blog.csdn.net/smartsmile2012/article/details/135766459
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章