three.js实现3D模型

╰+攻爆jí腚メ 2022-03-31 15:09 332阅读 0赞

案例完成过程中，遇见问题，可以从网站[https://discourse.threejs.org][https_discourse.threejs.org]查询解决办法

（一）成功案例一

1.效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

2.代码如下

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                body {
                    overflow: hidden;
                    margin: 0;
                }
            </style>
        </head>
        <body>
        </body>
        <script src="https://threejs.org/build/three.min.js"></script>
        <script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 0, 100);
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0x404040);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
    
            var controls = new THREE.OrbitControls(camera, renderer.domElement);
    
            var light = new THREE.DirectionalLight(0xffffff, 0.5);
            light.position.setScalar(100);
            scene.add(light);
            scene.add(new THREE.AmbientLight(0xffffff, 0.5));
            scene.add(new THREE.GridHelper(100, 100));
            var objLoader = new THREE.OBJLoader();
            objLoader.load('https://cywarr.github.io/small-shop/Kirche3D.obj', function (object) {
                object.rotation.x = -Math.PI * 0.5;
                var box = new THREE.Box3().setFromObject(object);
                var box3Helper = new THREE.Box3Helper(box);
                scene.add(box3Helper);
                scene.add(object);
            });
            function render() {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
            render();
        </script>
    </html>

（二）将案例一进行部分修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                #canvas1{position: absolute; left: 0; top: 0; z-index: 999;border-radius: 2%;border:2px solid #d7dbde;width: 50%;height: 244px;margin-left: 20px;margin-top: 20px;}
            </style>
        </head>
        <body>
            <canvas id='canvas1'></canvas>
        </body>
        <script src="https://threejs.org/build/three.min.js"></script>
        <script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <script>
            //自定义画布位置
            var canvas1 = document.getElementById('canvas1');
            let width = canvas1.clientWidth;
            let height = canvas1.clientHeight;
            var renderer = new THREE.WebGLRenderer({ canvas: canvas1 });
            renderer.setSize(width, height);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
            camera.position.set(50, 50, 100);
            camera.up.x = 0;//相机以哪个方向为上方
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt(0, 0, 0)//相机看向哪个坐标,(0,0,0)是原点
            //这里可以修改背景颜色
            renderer.setClearColor(0xffffff);
            //这里实现是否可以控制object的位置、旋转
            var controls = new THREE.OrbitControls(camera, renderer.domElement);
            //是否可以缩放
            controls.enableZoom = false;
            //禁止鼠标交互,此处设置为false之后，不能移动位置，不能旋转物体
            controls.enableRotate = false;
            var light = new THREE.DirectionalLight(0xf8d366, 0.5);
            light.position.setScalar(100);
            scene.add(light);
            scene.add(new THREE.AmbientLight(0xf8d366, 0.5));
            //加载OBJ格式的模型
            var objLoader = new THREE.OBJLoader();
            objLoader.load('https://cywarr.github.io/small-shop/Kirche3D.obj', function (object) {
                //辅助工具,x,y,z三维坐标轴
                scene.add(new THREE.AxesHelper(40));
                //模型放大1.5倍
                object.scale.set(1.5, 1.5, 1.5);
                object.position.set(0, 0, 0);
                //PI属性就是π,还表示了弧度π = 180°,Math.PI = 3.14 = 180°
                object.rotateX(-Math.PI * 0.5);
                object.rotateY(-Math.PI * 0);
                object.rotateZ(-Math.PI * 0);
                scene.add(object);
            });
            function render() {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }
            render();
        </script>
    </html>

(三)下载[react-three-demo][]的代码，进行预览查看和修改

代码下载网址：[https://github.com/poshaughnessy/react-three-demo][react-three-demo]

在iTerm中依次输入如下命令行

git clone https://github.com/poshaughnessy/react-three-demo.git

cd react-three-demo/

npm install

npm install -g gulp

输入上面的命令行后出现报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

赋予其权限

sudo npm install -g gulp

gulp serve

然后到[localhost:8000][localhost_8000]打开即可看到效果

（四）将案例二修改之后，放入react.js文件内

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

代码文件夹放置如下

![20190107224112386.png][]

代码下载地址：[https://download.csdn.net/download/qq\_37815596/10902476][https_download.csdn.net_download_qq_37815596_10902476]

[https_discourse.threejs.org]: https://discourse.threejs.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220331/591b6ab291c44bff9b4d78ada9c16ef1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220331/ca890e4331cb4760a5216d62f8ed949e.png
[react-three-demo]: https://github.com/poshaughnessy/react-three-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220331/3ab5fad759b5477f9af9c2a0db360e02.png
[localhost_8000]: http://localhost:8000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220331/5a989f4945204da8a469848ebb98629c.png
[20190107224112386.png]: /images/20220331/e5cb3775156341259fc9726b3f96d667.png
[https_download.csdn.net_download_qq_37815596_10902476]: https://download.csdn.net/download/qq_37815596/10902476