chris-schmitz/hello-threejs-and-vue.markdown

## hello-threejs-and-vue.markdown

      
    Raw
  

              hello-threejs-and-vue.markdown
            
          
    hello-threejs-and-vue

A Pen by Christopher Schmitz on CodePen.
License.

  
## index.html
<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>

## script.babel
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()
  }
})


## scripts
<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>

## style.scss
body{
  margin:0;
  overflow:hidden;
}
canvas{
  background:green;
}
	<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>