THREE--demo12（CSS 3D）

效果

源码

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, axesuseEffect(() => {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 = 150camera.lookAt(scene.position)}// 渲染器，计算指定相机角度下，浏览器中scene的样子const initRenderer = () => {// css 3d 渲染器renderer = new CSS3DRenderer()renderer.setSize(window.innerWidth, window.innerHeight)// 将render的输出挂载到HTML页面框架中的元素上ThreeContainer.current.append(renderer.domElement)}// 坐标轴const initAxes = () => {axes = new T.AxesHelper(20)scene.add(axes)}// 坐标格const initGridHelper = () => {// 参数：坐标格尺寸，坐标格细分次数，中线颜色，坐标格网格线颜色.const gridHelper = new T.GridHelper(100, 10, 0xff0000, 0x00ffff)scene.add(gridHelper)}// 轨道控制器const initOrbitControls = () => {orbitControls = new OrbitControls(camera, renderer.domElement)}// 创建iframeconst createCssObject = () => {const iframe = document.createElement('iframe')iframe.src = 'https://blog.csdn.net/weixin_43794073?type=blog'iframe.style.width = '1920px'iframe.style.height = '1080px'iframe.style.background = '#f00'iframe.style.border = '10px solid #1890ff'iframe.style.boxShadow = '0 0 20px #ff0000'// CSS3DObject 将dom元素转换为3d元素const cssObj = new CSS3DObject(iframe)cssObj.position.set(0, 0, 0)cssObj.scale.set(0.1, 0.1, 0.1)scene.add(cssObj)}// 渲染场景const renderScene = () => {requestAnimationFrame(renderScene)renderer.render(scene, camera)}const resize = () => {window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}, false)}// 初始化const init = () => {initScene()initCamera()initRenderer()initOrbitControls()initAxes()initGridHelper()createCssObject()renderScene()resize()}return (<div ref={ThreeContainer} />)
}export default Demo12

THREE--demo12（CSS 3D）相关推荐

【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
翻译 | CSS网格（CSS Grid）布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔校对者:珂珂.干干翻译 | CSS网格(CSS Grid)布局入门 bann ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
Java Swing中JFreeChart构建柱状图（非3D）时关于取消柱体的高亮问题的解决纪要？
背景项目应用中后期的用例Demo,特此纪要! 问题 Java Swing中JFreeChart构建的柱状图(非3D)如何取消柱体的高亮显示? 说明此Demo中点题的代码就一行,其余的代码段在其他的 ...
有趣的HTML实例（十四）窗边风景动画（css+js）
不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 index.html style.css ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
盒子模型（CSS重点）-盒子边框（border）
盒子模型(CSS重点)-盒子边框(border) 其实,CSS就三个大模块,盒子模型.浮动.定位,其余的都是细节.要求这三部分,无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是 ...

THREE--demo12（CSS 3D）

效果

源码

THREE--demo12（CSS 3D）相关推荐

最新文章

热门文章