Three.js入门学习笔记06：外部模型导入-C4D转成json文件供网页使用-材质导入

月亮实验室

已于 2023-03-24 18:03:43 修改

阅读量401

点赞数

分类专栏： Three.js 文章标签： javascript 学习 json three.js

于 2023-03-23 10:15:50 首次发布

本文链接：https://blog.csdn.net/jbwhysy/article/details/104745310

版权

Three.js 专栏收录该内容

21 篇文章 8 订阅

订阅专栏

参考学习：
Three.js入门指南
https://www.ituring.com.cn/book/1272
https://www.scaugreen.cn/posts/30679/

今日目标：把带材质的模型能够良好的导入网页中

有错误的地方欢迎指正，我会仔细研究学习，加以改进哒~~~~~

一.导入obj格式的静态外部模型

教程参考：https://www.ituring.com.cn/book/miniarticle/53881

(一).引入无材质模型，在代码中设置材质

1.引入OBJLoader.js文件

<script type="text/javascript" src="js/OBJLoader.js"></script>

2.在代码中写材质

var lo

3.双面绘制+动画

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>

<body>
<script type="text/javascript">
          var mesh = null;
          var id = null;
         //renderer
         var renderer = new THREE.WebGLRenderer();
            renderer.setSize(800 ,600);
            document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            renderer.setClearColor(0x000000);
             
         //scene
         var scene = new THREE.Scene();
         
         //camera
         var camera = new THREE.OrthographicCamera(-4, 4, 3, -3, 0.1, 100);
            camera.position.set(15, 30, 25);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);
             
         //model
         var loader = new THREE.OBJLoader();
            loader.load("model/port2.obj",function(obj){
            obj.position.set(0,-2,0);
            obj.scale.multiplyScalar(.5);
            obj.traverse(function(child) {
                        if (child instanceof THREE.Mesh) {
                                child.material = new THREE.MeshLambertMaterial({
                                    color: 0xffff00,
                                    side: THREE.DoubleSide
                                
                          });
                        }
                 });
             mesh = obj;
             scene.add(obj);
             
         });
             
         //light
         var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(10,10,5);
            scene.add(light);
             
        //render
        id = setInterval(draw, 20);
             
        function draw() {
           renderer.render(scene, camera);
           mesh.rotation.y += 0.01;
                if (mesh.rotation.y > Math.PI * 2) {
                    mesh.rotation.y -= Math.PI * 2;
                }
                
            }
        </script>
</body>
</html>

月亮实验室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js入门学习笔记06：外部模型导入-C4D转成json文件供网页使用-材质导入

参考学习：Three.js入门指南https://www.ituring.com.cn/book/1272今日目标：把带材质的模型能够良好的导入网页中有错误的地方欢迎指正，我会仔细研究学习，加以改进哒~~~~~一.导入obj格式的静态外部模型教程参考：https://www.ituring.com.cn/book/miniarticle/53881(一).引入无材质模型，在代码中设置...
复制链接

扫一扫