BestHub
Sign in
Tag

3D

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2025 · Game Development

Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide

This tutorial walks you through creating a lightweight, child‑friendly 3D Crossy Road‑style game using Three.js, covering scene setup, metadata‑driven terrain generation, asset loading, player movement queues, dynamic collision detection, UI communication, and deployment tips, all illustrated with code snippets and screenshots.

3DJavaScriptThree.js
0 likes · 30 min read
Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 26, 2025 · Game Development

Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls

This article guides readers through building a highly customized 3D scene using Three.js, GLSL shaders, AI‑generated 2D/3D assets, orthographic cameras, pixelated post‑processing, four‑direction character movement, octree collision detection, and stylized water effects, while providing code snippets and resource links.

3DAIBlender
0 likes · 35 min read
Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 9, 2025 · Frontend Development

Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing

This article walks through building an eye‑catching Hero Section using Three.js, custom GLSL shaders, dynamic point lights, and post‑processing effects such as UnrealBloomPass, FilmPass, and a custom ShaderPass, providing complete code snippets and practical tips for front‑end developers.

3DShaderThree.js
0 likes · 12 min read
Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 28, 2025 · Frontend Development

Implementing VR House Viewing with Vue, Photo Sphere Viewer, and AMap API

This guide details how to build an immersive VR house‑tour web app using Vue.js, Photo Sphere Viewer for 360° panoramas, and AMap API for custom and mass map markers, covering project setup, integration steps, and code examples.

3DAMapPhoto Sphere Viewer
0 likes · 6 min read
Implementing VR House Viewing with Vue, Photo Sphere Viewer, and AMap API
Python Programming Learning Circle
Python Programming Learning Circle
Dec 14, 2024 · Fundamentals

Comprehensive Guide to Data Visualization with Matplotlib in Python

This article provides a detailed tutorial on using Python's matplotlib library for creating 2D and 3D visualizations, covering installation, library architecture, basic plotting, line charts, bar charts, scatter plots, contour maps, image handling, and customizations with complete code examples.

3DData VisualizationImage Processing
0 likes · 14 min read
Comprehensive Guide to Data Visualization with Matplotlib in Python
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 19, 2024 · Frontend Development

Creating a Star Wars Opening Crawl Using CSS Keyframe Animations

This tutorial explains how to recreate the iconic Star Wars opening crawl effect with HTML and CSS, covering the required markup, keyframe animation concepts, 3D perspective settings, and detailed code examples for star, wars, and byline animations.

3DCSSKeyframes
0 likes · 9 min read
Creating a Star Wars Opening Crawl Using CSS Keyframe Animations
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 1, 2024 · Frontend Development

Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report

The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.

3DCSS animationFront-end
0 likes · 37 min read
Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report
Tencent Cloud Developer
Tencent Cloud Developer
Mar 14, 2024 · Mobile Development

Aurora Animation and 3D Penguin Effects in Mobile QQ: Noise Algorithms, Color Mapping, Performance Optimization, and Rendering Techniques

The new QQ 9.0 introduces aurora‑style animations generated by continuous, smoothed noise algorithms with uniform‑probability color mapping, and a spring‑driven 3D penguin rendered via Filament’s PBR materials and GPU compute shaders, achieving sub‑2 ms performance on most Android and iOS devices.

3DGPUMobile
0 likes · 17 min read
Aurora Animation and 3D Penguin Effects in Mobile QQ: Noise Algorithms, Color Mapping, Performance Optimization, and Rendering Techniques
IT Services Circle
IT Services Circle
Nov 28, 2023 · Frontend Development

A Simplified Front‑End Multi‑Window 3D Scene Using three.js and localStorage

This article explains how a pure‑frontend implementation using three.js and localStorage creates a synchronized 3D scene across multiple browser windows, detailing the project structure, core code files, and the window‑management logic that enables cross‑window coordination without a back‑end.

3DJavaScriptThree.js
0 likes · 13 min read
A Simplified Front‑End Multi‑Window 3D Scene Using three.js and localStorage
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 10, 2023 · Frontend Development

Creating a Time‑Travel Tunnel Effect with Three.js

This tutorial walks through the fundamentals of Three.js—setting up a scene, camera, lights, and meshes—to build a rotating cylindrical tunnel with animated textures and color changes, culminating in a complete time‑machine visual that runs in a web browser.

3DJavaScriptThree.js
0 likes · 11 min read
Creating a Time‑Travel Tunnel Effect with Three.js
Python Programming Learning Circle
Python Programming Learning Circle
Jul 12, 2023 · Game Development

Introduction and Beginner Guide to Vizard VR Development Platform

This article introduces Vizard, a C/C++‑based virtual‑reality development platform with Python support, and provides step‑by‑step code examples for loading avatars, creating random pigeon walks, implementing character dialogue, handling movement and mouse input, and showcasing typical VR scene effects.

3DPythonTutorial
0 likes · 5 min read
Introduction and Beginner Guide to Vizard VR Development Platform
Python Programming Learning Circle
Python Programming Learning Circle
Mar 11, 2023 · Game Development

Introduction and Basic Usage of the Vizard Virtual‑Reality Development Platform

This article introduces Vizard, a C/C++‑based virtual‑reality development platform with Python support, and demonstrates how to load avatars and objects, create random‑walk behavior, implement dialogue actions, control character movement via keyboard, capture mouse input, and combine these techniques into a complete interactive 3D scene.

3DPythonTutorial
0 likes · 5 min read
Introduction and Basic Usage of the Vizard Virtual‑Reality Development Platform
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 30, 2022 · Frontend Development

Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)

This article explains how to use Three.js to create a realistic 3D phone product page by loading and applying multimedia assets such as custom fonts, textures, audio sources, and video textures, and demonstrates interactive features like ray‑casting for material switching and first‑person controls.

3DJavaScriptThree.js
0 likes · 19 min read
Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2022 · Frontend Development

Three.js Basics: Setting Up Scene, Camera, Renderer, and Simple Animations

This tutorial walks through the fundamental steps of using Three.js—including scene creation, camera configuration, renderer setup, model loading, orbit controls, animation, and responsive resizing—by illustrating each concept with clear code examples and a storytelling analogy.

3DThree.jsWebGL
0 likes · 11 min read
Three.js Basics: Setting Up Scene, Camera, Renderer, and Simple Animations
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 14, 2022 · Frontend Development

Building an Interactive 3D Web Page with Three.js, Tween.js, and DRACOLoader

This tutorial demonstrates how to create a two‑page 3D web experience using Three.js, Blender‑compressed models, DRACOLoader for efficient loading, Tween.js for smooth animations, custom cursor handling, lighting effects, and responsive rendering, complete with code snippets and deployment instructions.

3DDRACOLoaderThree.js
0 likes · 28 min read
Building an Interactive 3D Web Page with Three.js, Tween.js, and DRACOLoader
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 23, 2022 · Frontend Development

Creating a Flaming Elden Ring Logo with React and Three.js

This tutorial demonstrates how to build a fire‑animated Elden Ring logo using React, Three.js, and the Fire.js extension, covering background setup, resource import, scene initialization, fire effect configuration, responsive scaling, camera animation, and rendering loop with complete code examples.

3DFire.jsReact
0 likes · 9 min read
Creating a Flaming Elden Ring Logo with React and Three.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 16, 2022 · Frontend Development

Implementing a 3D Floating Text Effect with React and Three.js

This article demonstrates how to recreate the Three.js Journey floating 3D text effect using a React and Three.js stack, covering resource imports, DOM structure, state management, CSS grid background, font loading, geometry creation, mouse interaction, fullscreen handling, post‑processing effects, and responsive scaling.

3DReactThree.js
0 likes · 17 min read
Implementing a 3D Floating Text Effect with React and Three.js
Sohu Tech Products
Sohu Tech Products
Dec 15, 2021 · Mobile Development

Implementing a Naked‑Eye 3D Effect on Android with OpenGL

This article explains how to create a naked‑eye 3D visual effect in an Android app by splitting an image into three layers, using OpenGL for GPU‑accelerated rendering, registering device sensors to track rotation, applying matrix transformations, and smoothing sensor noise with a low‑pass filter.

3DAndroidMobile Development
0 likes · 14 min read
Implementing a Naked‑Eye 3D Effect on Android with OpenGL