从C4D建模到Three.js实现闹钟产品360度展示效果(.stl,.obj,.mtl)

最新推荐文章于 2024-07-26 15:44:23 发布

Capricorncd

最新推荐文章于 2024-07-26 15:44:23 发布

阅读量3.4k

点赞数 1

文章标签： webgl three.js C4D reactjs canvas

本文链接：https://blog.csdn.net/Yagizacd/article/details/109051347

版权

该博客通过C4D建模并使用Three.js在WebGL上实现了一个闹钟产品的360度展示效果。内容包括C4D建模的注意事项，如避免使用面建模，以及导出.obj和.mtl文件的步骤。最后，详细讲解了基于Webpack4和Reactjs的js实现过程。

摘要由CSDN通过智能技术生成

演示地址：https://capricorncd.github.io/blog/dist/three/index.html#/ClockObj

源码：https://github.com/capricorncd/blog/tree/master/demos/three

C4D文件：clock(R21.207).c4d https://github.com/capricorncd/blog/tree/master/c4d

流程

C4D建模
导出.obj文件
js实现（Three.js）,此例开发环境使用的Webpack4+React

一、C4D建模

从C4D建模到Three.js实现闹钟产品360度展示效果(.stl,.obj,.mtl)

这里B站有视频教程，这里就不赘述。

在线视频教程：https://www.bilibili.com/video/BV177411P7d1?p=3

建模时注意需要注意的地方：

建模：不能使用面(Disc)建模，在浏览器中不会显示，需改用圆柱体(Cylinder)。
贴图：需给每个几何体贴图，不能使用分组贴图。在Three.js中分组贴图不能与单个几何体绑定，故浏览器中不会显示贴图。

二、导出`.obj`文件

从C4D建模到Three.js实现闹钟产品360度展示效果(.stl,.obj,.mtl)

C4D中完成建模和贴图后，就可以导出.obj文件。

# 工具栏
file -> Export -> Wavefront OBJ(*.obj)

其他导出选项默认即可。导出obj文件的同时，会导出一个同名贴图.mtl文件。

从C4D建模到Three.js实现闹钟产品360度展示效果(.stl,.obj,.mtl)

三、js实现

# "three": "^0.120.1"
npm i -S three
# or
yarn add three

src/components/ClockObj/core.js

import {
   
  AmbientLight,
  DirectionalLight, PerspectiveCamera,
  Scene, WebGLRenderer
} from 'three'
import {
    OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import {
    MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let scene, renderer

/**
 * 加载贴图和模型对象文件 
 * load resource 
 * @returns {Promise<unknown>}
 */
 function loadResource() {
   
   return