用的cnpm安裝
cnpm install three
<
template
>
<
div
id=
"demo"
style=
"width:600px;height:600px;"/
>
</
template
>
<
script
>
import
*
as
THREE
from
'three'
export
default {
data () {
return {
cube:
undefined,
scene:
undefined,
camera:
undefined,
renderer:
undefined,
floorTexture:
undefined
}
},
mounted () {
this.
initThree()
this.
animate()
},
methods: {
initThree () {
// 創建場景
this.
scene =
new
THREE.
Scene()
// 創建相機
this.
camera =
new
THREE.
PerspectiveCamera(
75,
window.
innerWidth /
window.
innerHeight,
0.1,
1000)
// 渲染器
this.
renderer =
new
THREE.
WebGLRenderer()
// 設置背景顏色 最新版目前默認為黑色
this.
renderer.
setClearColor(
0xffffff)
this.
renderer.
shadowMap.
enabled =
true
this.
renderer.
setSize(
window.
innerWidth,
window.
innerHeight)
document.
getElementById(
'demo').
appendChild(
this.
renderer.
domElement)
// 加載圖片
const
geometry =
new
THREE.
BoxGeometry()
var
texture =
new
THREE.
TextureLoader().
load(
'static/img/123.png', ()
=> {
this.
renderer.
render(
this.
scene,
this.
camera)
})
// 沿x方向和Y方向都重復填充
texture.
wrapS =
texture.
wrapT =
THREE.
RepeatWrapping
// 每面4*4
texture.
repeat.
set(
4,
4)
var
material =
new
THREE.
MeshBasicMaterial({
map:
texture })
this.
cube =
new
THREE.
Mesh(
geometry,
material)
this.
cube.
position.
set(
1,
0,
0)
this.
scene.
add(
this.
cube)
this.
camera.
position.
z =
5
this.
renderer.
render(
this.
scene,
this.
camera)
},
animate
:
function () {
requestAnimationFrame(
this.
animate)
this.
cube.
rotation.
x +=
0.12
this.
cube.
rotation.
y +=
0.02
this.
renderer.
render(
this.
scene,
this.
camera)
}
}
}
</
script
>
<
style
>
.mod-home {
line-height:
1.5;
}
</
style
>