Brief introduction:

This paper mainly shows that if three.js imports multiple external models (OBJ) and adds controllers, the effect of scaling, rotation, dragging and translation can be achieved.

First look at the renderings:

The preparatory work

  1. Set up a vUE project and install the three.js dependency (find your own website, skip this step)
  2. Open the project, go to the static folder, and create a new folder with whatever name you want to put the.obj file you are going to read in there

highlight

(Pick up the little benches, everybody)

Build the page

<template>
  <div class="photo_action_page">
    <div id="container"></div>
  </div>
</template>
Copy the code

So that’s OK, you can also give it a style, this is optional

Introduction of depend on

import * as Three from 'three'
import { OBJLoader } from 'three-obj-mtl-loader'
Copy the code

No dependencies have been installed

Define variables

Read files and render (multiple models)

init () { this.scene = new Three.Scene() this.scene.add(new Three.AmbientLight(0x999999)) this.light = new Xdfebff Three. DirectionalLight (0, 0.45). This light, the position, the set (50, 200, 100) this. Light. Position. MultiplyScalar (0.3). This scene. The add (enclosing light) / / initialize camera this. Camera = new PerspectiveCamera(45, window.innerwidth/window.innerheight, 0.1, 1000) this.camera.position.set(0, 0, 0, 0) 30) / / rendering enclosing the renderer. = new Three WebGLRenderer () enclosing the renderer. SetClearColor (0 x3e7bff) Enclosing the renderer. SetPixelRatio (window. DevicePixelRatio) / / in order to compatible with hd screens enclosing the renderer. SetSize (window. InnerWidth, window.innerHeight) const container = document.getElementById('container') container.appendChild(this.renderer.domElement) }, animate () { requestAnimationFrame(this.animate) this.render() }, Render () {this.renderer.render(this.scene, this.camera)}, loadObj () {for (let I = 0; i < 14; i++) { new OBJLoader().setPath('/static/obj/').load(`body${i}.obj`, obj => { obj.scale.set(1, 1, 1) obj.position.set(0, 0, 0) obj.castShadow = true obj.receiveShadow = true obj.traverse(child => { if (child instanceof Three.Mesh && i > 0) { child.material = new Three.MeshBasicMaterial({color: 0xfe4066}) } }) this.scene.add(obj) if (i > 0) { this.object.push(obj) } }) } }Copy the code

At this point, the model is ready to load, and you can see the effect as the program runs

But that’s not enough. Now it just shows up, but it doesn’t do anything. The following controllers are introduced:

First introduce the controller dependencies (don’t forget to install them)

import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import { DragControls } from 'three/examples/jsm/controls/DragControls'
const OrbitControls = require('three-orbit-controls')(Three)
Copy the code

Initializing the controller (suggested in init())

this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.target.set(0, 0, 0)
Copy the code

Now that you can zoom and rotate, you’re ready to win

Add drag and drop pan control

initDragControls () {
  let transformControls = new TransformControls(this.camera, this.renderer.domElement)
  this.scene.add(transformControls)
  var dragControls = new DragControls(this.object, this.camera, this.renderer.domElement)
  dragControls.addEventListener('hoveron', event => {
    transformControls.attach(event.object)
  })
  dragControls.addEventListener('dragstart', event => {
    this.controls.enabled = false
  })
  dragControls.addEventListener('dragend', event => {
    this.controls.enabled = true
  })
}
Copy the code

Mounted ()

There you go. You can like it