安装
npm install three
场景
this.scene = new THREE.Scene()
添加东西到场景(物体、坐标、光线)
this.scene.add(东西)
物体
传送门点击
贴图
const loader = new THREE.TextureLoader() const texture = loader.load('文件路径') //物体 const Geometry = new THREE.PlaneGeometry(2,2) const Material = new MeshBasicMaterial({ map: texture, //图片 side: THREE.DoubleSide, //两面都贴上图片 如果是正方形不用写 })
正方体多面贴图点击
-------------------------------------------
贴图的方式
1.THREE.NearestFilter
const loader = new THREE.TextureLoader() //定义贴图对象 const texture = loader.load('文件路径') // 贴图对象加载图片 texture.magFilter = THREE.NearestFilter texture.wrapS = THREE.RepeatWrapping //X轴方向平铺 texture.wrapT = THREE.RepeatWrapping //X轴方向平铺 texture.repeat.set(10, 10) //x方向和y方向的平铺数 //物体 const Geometry = new THREE.PlaneGeometry(2,2) const Material = new MeshBasicMaterial({ map: texture, //图片 side: THREE.DoubleSide, //两面都贴上图片 如果是正方形不用写 })
效果图
-------------------------------------------
2.THREE.LinearFilter
const loader = new THREE.TextureLoader() //定义贴图对象 const texture = loader.load('文件路径') // 贴图对象加载图片 texture.