three.js初试

最新推荐文章于 2024-04-25 20:22:26 发布

emongol

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量233

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_43140890/article/details/107671249

版权

最终实现通过html代码、three.js、本地服务器，使用浏览器查看一个gltf模型

桌面文件夹three中的内容
1.模型使用的gltf是通过obj转换来的，转换使用的obj2gltf插件，使用node.js和npm；
2.三个js是需要使用的库，在html内进行引用；
3.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three加载3d模型</title>
    <script src="three.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>

    <style>
        *{
            margin:0 ;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        var container,controls;
        var camera,scene,renderer,light;

        function init(){
            container =document.createElement("div");
            document.body.appendChild(container);
            //创建相机
            camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.25,1000);
            camera.position.set(400,400,150);//相机位置(黄色是y，蓝色是z,红色是x)
            //渲染
            renderer=new THREE.WebGLRenderer({
                antailias:true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth,window.innerHeight);
            container.appendChild(renderer.domElement);
            //轨道控制
             controls=new THREE.OrbitControls(camera,renderer.domElement);
             controls.target.set(0,150,0);
             controls.update();
            //场景
            scene=new THREE.Scene();
            //打光
            light=new THREE.HemisphereLight(0xbbbbff,0x444422);
            light.position.set(0,1,0);
            scene.add(light);
            var loader=new THREE.GLTFLoader().setPath("modles/");//模型加载器.最后的斜杠不能少
            loader.load("build.gltf",function(gltf){
                gltf.scene.scale.set(0.03,0.03,0.03);
                gltf.scene.position.set(-80,0,0);
                scene.add(gltf.scene);
            });
            //添加坐标线
            var axesHelper=new THREE.AxesHelper();//(黄色是y，蓝色是z,红色是x)
            scene.add(axesHelper);
        }
        init();
        animate();//让场景及时地requestAnimationFrame
        function animate(){
            requestAnimationFrame(animate);
            renderer.render(scene,camera);
        }
    </script>
</body>
</html>

遇到的问题：

想要加载模型文件需要在本地部署一个http-server服务器，相当于在服务器打开这个html文件并使用里面路径下的模型文件，很简单，同样是使用node.js，做法：打开cmd，将路径切换到nodejs的安装目录（如E:\softwares\nodejs\node_modules\npm）输入：npm install -g http-server开始下载，下载完成后，将cmd路径切换到html所在文件夹（如：C:\桌面\three），输入http-server，整个下载http-server和开启服务器操作如下图

出现最后的ip地址和端口号即完成，而后就可以将浏览器地址处的html文件路径改为localhost:8080了，端口号视情况改变，然后就加载使用模型文件了。
我这个版本的three.js和我看的教学视频版本不一样，就这么几行代码就出现了不一致的问题，问题出现在添加鼠标控制转向的实现上，不是引用了一个OrbitControls.js嘛，用他创建了一个controls变量，创建语句为controls=new THREE.OrbitControls(camera,renderer.domElement);视频教程里的创建时只有第一个参数，没有后面的domElement，我这个版本的three.js(版本为r118)如果只有第一个参数会报错

最终效果

emongol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js初试

最终实现通过html代码、three.js、本地服务器，使用浏览器查看一个gltf模型1.模型使用的gltf是通过obj转换来的，转换使用的obj2gltf插件，使用node.js和npm；2.三个js是需要使用的库，在html内进行引用；3.html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
复制链接

扫一扫