首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >编辑三维模型的零件尺寸

编辑三维模型的零件尺寸
EN

Stack Overflow用户
提问于 2019-04-20 22:27:25
回答 1查看 32关注 0票数 0

我想开发一个网络应用程序来输入一个人的测量和显示与这些测量的3d模型。我选择了three.js来启动它。我从clara.io下载了一个名为standard-male-figure的3d模型。这是我用来显示人类模型的代码。

代码语言:javascript
运行
复制
import React, { Component } from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import * as THREE from "three-full";

const styles = (/*theme*/) => ({

});

class ThreeDView extends Component {
    constructor(props){
        super(props);


        this.start = this.start.bind(this);
        this.stop = this.stop.bind(this);
        this.renderScene - this.renderScene.bind(this);
        this.animate = this.animate.bind(this);

    }

    componentDidMount() {


        const width = this.mount.clientWidth;
        const height = this.mount.clientHeight;

        //ADD SCENE
        this.scene = new THREE.Scene();

        //ADD CAMERA
        this.camera = new THREE.PerspectiveCamera(100,1);
        this.camera.position.z = 12;
        this.camera.position.y = 0;
        this.camera.position.x = 0;

        //ADD RENDERER
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setClearColor("#f0f0f0");
        this.renderer.setSize(width, height);
        this.mount.appendChild(this.renderer.domElement);

        // MOUSE ROTATION
        this.orbit = new THREE.OrbitControls(this.camera,this.renderer.domElement);
        this.orbit.update();

        //ADD LIGHTS
        this.light = new THREE.PointLight(0xffffff,1.3);
        this.light.position.z = 10;
        this.light.position.y=20;
        this.scene.add(this.light);

        // ADD MAN FIGURE
        const loader = new THREE.ColladaLoader();
        loader.load("/models/standard-male-figure.dae",(manFigure)=>{
            this.man = manFigure;
            this.man.name = "man-figure";
            this.man.scene.position.y = -10;
            this.scene.add(this.man.scene);
        },undefined,()=>alert("Loading failed"));


        this.start();
    }
    componentWillUnmount() {
        this.stop();
        this.mount.removeChild(this.renderer.domElement);
    }

    start() {
        if (!this.frameId) {
            this.frameId = requestAnimationFrame(this.animate);
        }
    }

    stop () {
        cancelAnimationFrame(this.frameId);
    }

    animate () {

        this.renderScene();
        this.frameId = window.requestAnimationFrame(this.animate);
    }

    renderScene () {
        this.orbit.update();
        this.light.position.z = this.camera.position.z;
        this.light.position.y=this.camera.position.y+20;
        this.light.position.x=this.camera.position.x;
        this.renderer.render(this.scene, this.camera);
    }


    render() {


        return (
            <div style={{ height: "640px" }} ref={(mount) => { this.mount = mount; }} >

            </div>
        );
    }
}

ThreeDView.propTypes = {
    values: PropTypes.object
};

/*
all values in inches
values = {
 heightOfHand:10,
 , etc..
}
*/

export default withStyles(styles)(ThreeDView);

值是用户输入的度量值。我不知道如何使用这些测量值开始更新3d模型。请给我一个起点或任何建议,以完成这一点。谢谢你!

EN

Stack Overflow用户

发布于 2019-04-21 02:24:17

首先,你可以得到你男人当前的大小和比例

代码语言:javascript
运行
复制
const box = new THREE.Box3().setFromObject(this.man)
const currentObjectSize = box.getSize()
const currentObjectScale = this.man.scale

当用户更新大小值(newSize)时,您可以为自己计算新的比例

代码语言:javascript
运行
复制
const newScale = new THREE.Vector3(
    currentObjectScale.x * newSize.x/currentObjectSize.x,
    currentObjectScale.y * newSize.y/currentObjectSize.y,
    currentObjectScale.z * newSize.z/currentObjectSize.z
)

然后用这个天平更新你的男人

代码语言:javascript
运行
复制
this.man.scale.set(newScale.x, newScale.y, newScale.z)
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55774444

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档