THREE--demo12（CSS 3D）

梅花三

于 2022-09-07 15:46:27 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

分类专栏： react three 文章标签： three

本文链接：https://blog.csdn.net/weixin_43794073/article/details/126747463

该博客详细介绍了如何在React应用中利用Three.js库创建3D场景，包括初始化场景、相机、CSS3D渲染器、轨道控制器、坐标轴和坐标网格。同时，展示了如何将iframe元素转化为3D对象并添加到场景中，以及实现窗口大小变化时的响应式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

源码

import { useEffect, useRef } from 'react'
import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'

const Demo12 = () => {
    let scene, camera, renderer, orbitControls, axes

    useEffect(() => {
        init()
    }, [])

    const ThreeContainer = useRef()

    // 场景，作为容器，保存并跟踪所有渲染的物体
    const initScene = () => {
        scene = new T.Scene()
    }

    // 相机
    const initCamera = () => {
        // 透视相机，参数：视场，长宽比，近面，远面
        camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 150
        camera.lookAt(scene.position)
    }

    // 渲染器，计算指定相机角度下，浏览器中scene的样子
    const initRenderer = ()