Question

我在打字稿上使用react，试图弄清楚three.js的工作原理，但偶然发现了有关相机旋转以及一般相机移动的一些问题

OnComponentDidMount加载我的虚假数据并开始绘制。我设法绘制了图像（虽然不正确，但是我仍然绘制了它）

我尝试使用OrbitControls添加旋转，但这是一个问题，因为我渲染的图像无法与之交互：我无法缩放旋转或其他任何东西。

第二个问题是，我在组件中进行渲染的方式感觉非常“ hacky”，而不是我希望其进行渲染的方式。

很多工作都受到“ https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_normals.html”的启发-目前，我很简单地试图在React环境中做出反应，three.js一起工作，而不是非常关注实际数据。呈现。

import React from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';

export interface IMapperState {
    canvasReady: boolean;
}

export default class Drawer extends React.Component<{}, IMapperState> {
private map: THREE.WebGLRenderer;
private camera: THREE.PerspectiveCamera;
private scene: THREE.Scene;

constructor(props: any) {
    super(props);
    this.map = new THREE.WebGLRenderer({ antialias: true });
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    this.state = { canvasReady: false }
}

private draw = (data: any) => {
    this.scene.background = new THREE.Color(0xcce0ff);
    this.camera.position.set(10, 10, 30);
    this.map.setSize(window.innerWidth / 2, window.innerHeight / 2);

    data.box.forEach(coord => {
        const geometry = new THREE.BoxGeometry(coord.x, coord.z, coord.y)
        const wallImage = new THREE.MeshBasicMaterial({ opacity: 0.1, color: "red" })

        const wall = new THREE.Mesh(geometry, wallImage);

        wall.position.setX(coord.x);
        wall.position.setY(coord.y);
        this.scene.add(wall)
    });

    const controls = new OrbitControls(this.camera);

    this.map.render(this.scene, this.camera);

    this.map.gammaInput = true;
    this.map.gammaOutput = true;
    this.map.shadowMap.enabled = true;

    window.addEventListener("resize", this.onWindowResize, false);

    this.setState({ canvasReady: true })
}

private onWindowResize = () => {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.map.setSize(window.innerWidth / 2, window.innerHeight / 2);
}

public componentDidMount() {
    const mockData = {
        box: [
            { x: 10, y: 30, z: 100 }
        ]
    };
    this.draw(mockData);
}

render(): JSX.Element {
    if (this.state.canvasReady) {
        if (document.getElementById("threeJsTest")) {
            var el: HTMLElement | null = document.getElementById("threeJsTest");
            if (el) {
                el.appendChild(this.map.domElement);
            }
        }
    }
    return (
        <div id="threeJsTest" />
    );
}

}

Package.json

{
  "name": "threejsreactdemo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "23.3.10",
    "@types/node": "10.12.18",
    "@types/react": "16.7.17",
    "@types/react-dom": "16.0.11",
    "@types/three": "^0.93.13",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "three": "^0.99.0",
    "three-orbitcontrols-ts": "^0.1.2",
    "typescript": "3.2.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {}
}

实际结果：我无法与图像进行交互，并且我的渲染方法不是很漂亮。

想要的结果：希望我可以使用更干净的渲染方法-以及缩放/旋转渲染图像的能力-作为响应：打字稿

使用react和three.js时，似乎无法使three.js正确旋转

0 个答案: