three.js实现3D模型

最新推荐文章于 2024-03-20 14:41:52 发布

热爱前端的小君同学

最新推荐文章于 2024-03-20 14:41:52 发布

阅读量1.8w

点赞数 6

分类专栏：前端文章标签： three.js

本文链接：https://blog.csdn.net/qq_37815596/article/details/85708779

版权

前端专栏收录该内容

105 篇文章 4 订阅

订阅专栏

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

（一）成功案例一

1.效果图

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>

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

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

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

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

cd react-three-demo/

npm install

npm install -g gulp

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

赋予其权限

sudo npm install -g gulp

gulp serve

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

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

效果图如下

代码文件夹放置如下

代码下载地址：https://download.csdn.net/download/qq_37815596/10902476

热爱前端的小君同学

关注

6
点赞
踩
36

收藏

觉得还不错? 一键收藏
6
评论
three.js实现3D模型

案例完成过程中，遇见问题，可以从网站https://discourse.threejs.org查询解决办法（一）成功案例一1.效果图2.代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫