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

smartsmile2012

于 2024-01-23 11:00:20 发布

阅读量501

点赞数 10

CC 4.0 BY-SA版权

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

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

<!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 mySc