Question

我确定这个问题经常被问到并且有时间检查一些答案，但是我仍然无法使网格以其中心旋转。

文件加载日语字体以显示三个单词，并在刷新框架时分别旋转。每个单词都从其起点旋转，即第一个字符。我正在寻找将轴作为单词的中心。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">


  <title>3js</title>
</head>
<body style="margin:0;">

<script src="three.min.js"></script>
<script>

  var camera, scene, renderer

  var material, spotlight

  var text1, text2, text3, pivot

  var texts = []

  var mouseX = 0, mouseY = 0

  var windowHalfX = window.innerWidth / 2
  var windowHalfY = window.innerHeight / 2

  loadFont()
  init()
  animate()

  function init() {

    // Create camera

    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.z = 50

    // Create scene

    scene = new THREE.Scene()

    // Create material

    material = new THREE.MeshLambertMaterial({
      color: 0xFF97A3,
      emissive: 0xFF97A3
    })

    // Create and add light

    spotlight = new THREE.SpotLight(0xFF97A3)
    spotlight.position.set(30, 60, 60)
    scene.add(spotlight)

    // Renderer

    renderer = new THREE.WebGLRenderer()
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setClearColor(0x1a1a1a)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    // Responsive on window resize

    window.addEventListener('resize', onWindowResize, false);

    // Store x and y position on mouse movement

    document.addEventListener('mousemove', onDocumentMouseMove, false)

  }

  function onWindowResize() {

    windowHalfX = window.innerWidth / 2
    windowHalfY = window.innerHeight / 2
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize( window.innerWidth, window.innerHeight )

  }

  function onDocumentMouseMove(event) {

    mouseX = (event.clientX - windowHalfX) * 0.02
    mouseY = (event.clientY - windowHalfY) * 0.02

  }

  function animate() {
    requestAnimationFrame( animate )

    texts.forEach(updateMeshes)

    render()
  }

  function render () {

     // Adjust camera's position based on mouse x and y position

    camera.position.x += (mouseX - camera.position.x) * 0.01
    camera.position.y += (-mouseY - camera.position.y) * 0.01

    camera.lookAt(scene.position)

    renderer.render(scene, camera)
  }

  function updateMeshes(mesh) {

    var randomSpeed = Math.random() * ( 0.0015 - 0.0001 ) + 0.001

    mesh.rotation.x += randomSpeed
    mesh.rotation.y += randomSpeed
    mesh.updateMatrix()

  }

  /* HELPERS */

  // Settings
  var height = 2,
        size = 10,
        curveSegments = 0,
        bevelThickness = 0,
        bevelSize = 0,
        bevelSegments = 3,
        bevelEnabled = true,
        font = undefined

  // Load js font file
  function loadFont() {
    var loader = new THREE.FontLoader()
    loader.load('songti_sc_bold.typeface.js', function (res) {
      font = res
      createText()
    })
  }

  // Creates text 3D objects with previous settings
  function createText() {
    textGeo1 = new THREE.TextGeometry( '耐久', {
      font: font,
      size: size,
      height: height,
      curveSegments:curveSegments,
      weight: "normal",
      bevelThickness:bevelThickness,
      bevelSize:bevelSize,
      bevelSegments:bevelSegments,
      bevelEnabled:bevelEnabled
    })

    textGeo2 = new THREE.TextGeometry('決意', {
      font: font,
      size: size,
      height: height,
      curveSegments: curveSegments,
      weight: "normal",
      bevelThickness: bevelThickness,
      bevelSize: bevelSize,
      bevelSegments: bevelSegments,
      bevelEnabled: bevelEnabled
    })

    textGeo3 = new THREE.TextGeometry('愛', {
      font: font,
      size: size,
      height: height,
      curveSegments: curveSegments,
      weight: "normal",
      bevelThickness: bevelThickness,
      bevelSize: bevelSize,
      bevelSegments: bevelSegments,
      bevelEnabled: bevelEnabled
    })

    var text1 = new THREE.Mesh(textGeo1, material)
    var text2 = new THREE.Mesh(textGeo2, material)
    var text3 = new THREE.Mesh(textGeo3, material)

    // Position text1 on screen

    text1.position.x = 1
    text1.position.y = 1
    text1.position.z = 1

    // Initial text1 rotation

    text1.rotation.x = 0
    text1.rotation.y = 0.4
    text1.rotation.z = 0.4

    // Position text2 on screen

    text2.position.x = -15
    text2.position.y = -35
    text2.position.z = -100

    // Initial text2 rotation

    text2.rotation.x = 0
    text2.rotation.y = 0
    text2.rotation.z = 0

    // Position text3 on screen

    text3.position.x = 30
    text3.position.y = -25
    text3.position.z = -20

    // Initial text3 rotation

    text3.rotation.x = 30
    text3.rotation.y = -25
    text3.rotation.z = -20

    scene.add(text1)
    scene.add(text2)
    scene.add(text3)

    texts.push(text1)
    texts.push(text2)
    texts.push(text3)
  }

</script>
</body>
</html>

或者，如果您想获取文件，我在github上有以下代码：https://github.com/marioecg/kanjis-3JS

谢谢！

如何从其中心轴旋转3D日语字符？

0 个答案: