Three.js 教程4--渲染一头牛

1
2
<!-- 引入obj模型加载库OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    /**
         * 创建场景对象Scene
         */
    var scene = new THREE.Scene();
/**
         * OBJ文件加载  只加载obj文件中的几何信息，不加载材质文件.mtl
         */
var loader = new THREE.OBJLoader();
// 没有材质文件，系统自动设置Phong网格材质
loader.load('./assets/spot_triangulated_good.obj',function (obj) {
    // 材质 贴图
    var texture = new THREE.TextureLoader().load('./assets/spot_texture.png');
    // 控制台查看返回结构：包含一个网格模型Mesh的组Group
    console.log('kkk',obj);
    // 加载后的一些编辑操作
    obj.children[0].scale.set(120,120,120);//网格模型缩放
    obj.children[0].geometry.center();//网格模型的几何体居中
    // obj.children[0].material.color.set(0xff0390);//设置材质颜色
    obj.children[0].material.map = texture;//设置材质颜色（使用贴图）
    scene.add(obj);
})
</script>

1
2
3
4
// 材质 贴图
var texture = new THREE.TextureLoader().load('./assets/spot_texture.png');
// obj.children[0].material.color.set(0xff0390);//设置材质颜色
obj.children[0].material.map = texture;//设置材质颜色（使用贴图）