Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
hello-threejs-and-vue
<html>
<head>
</head>
<body>
<div id="app">
X: <input v-model.number="rotationSpeed.x" type="range" min="0" max=".5" step=".001"> {{rotationSpeed.x}}
Y: <input v-model.number="rotationSpeed.y" type="range" min="0" max=".5" step=".001"> {{rotationSpeed.y}}
Z: <input v-model.number="rotationSpeed.z" type="range" min="0" max=".5" step=".001"> {{rotationSpeed.z}}
<!-- the geometry portion of the mounted hook needs to be moved out to a method before we can fit this in
-->
Box Color: <input v-model="boxColor" type="color">
<canvas ref="myCanvas"></canvas>
</div>
</body>
</html>
new Vue({
el: '#app',
data: {
renderer: null,
scene: null,
camera: null,
cube:null,
animationFrame: null,
backgroundColor: 'gray',
boxColor: 0x0000FF,
rotationSpeed: {
x: 0.01,
y: 0.01,
z: 0.01,
}
},
watch: {
rotationSpeed: {
handler(newValue) {
this.triggerRenderer()
},
deep: true
}
},
methods: {
triggerRenderer(){
if (this.animationFrame) {
cancelAnimationFrame(this.animationFrame)
}
this.cube.rotation.x += this.rotationSpeed.x
this.cube.rotation.y += this.rotationSpeed.y
this.cube.rotation.z += this.rotationSpeed.z
this.renderer.render(this.scene, this.camera)
this.animationFrame = requestAnimationFrame(this.triggerRenderer)
}
},
mounted() {
// !! continue extracting stuff out to methods and data properties as it makes sense !! //
// Create the renderer and attach it to the canvas in our document
this.renderer = new THREE.WebGLRenderer({
canvas: this.$refs.myCanvas,
antialias:true
})
// add some basic settings to the renderer
this.renderer.setClearColor(0x00ff00)
this.renderer.setPixelRatio(window.devicePixelRatio)
this.renderer.setSize(window.innerWidth, window.innerHeight)
// Create a perspective camera with the desired view settings
this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000)
// Create the scene that we can start adding stuff to
this.scene = new THREE.Scene()
// create some lights for our scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
const pointLight = new THREE.PointLight(0xffffff, 0.5)
this.scene.add(ambientLight)
this.scene.add(pointLight)
// Create a cube to be placed in the scene
// !! Pull this out into a method so we can dynamically call and control the
// !! creation of the gemometry
const geometry = new THREE.BoxGeometry(100,100,100)
const material = new THREE.MeshLambertMaterial({color: 0x11aaff})
this.cube = new THREE.Mesh(geometry, material)
// set the position for the cube
// note that the z value puts it within our field of view
this.cube.position.set(0,0,-500)
// place that cube
this.scene.add(this.cube)
// kick off the animation
//requestAnimationFrame(this.triggerRenderer)
this.triggerRenderer()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
body{
margin:0;
overflow:hidden;
}
canvas{
background:green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment